私は次のコードを持っています:
<template id="main">
<div class="jumbotron">
<img id="mimg" class="media-object" src="%placeholder" />
<div>%placeholder</div>
</div>
</template>
これは、投稿のテンプレートとして機能することになっています。これが機能することになっている方法は、jsの一部がこのhtmlコードのいくつかのインスタンスをページにロードし、もちろんプレースホルダーをエントリの実際のテキストに置き換えることです。
問題は、jqueryを使用して特定のテンプレートインスタンス内のmimgタグにアクセスする方法がわからないことです。
したがって、質問は非常に単純です。DOMオブジェクトが与えられた場合、一意でないタグを使用してそのDOM内のオブジェクトにアクセスするにはどうすればよいですか(複数のタグがあるため)。
MDNテンプレートのドキュメントで詳しく説明されているように、aの内容は<template>
DOMノードとして解析されません。後で使用するために実際のDOMノードに解析できるコンテンツが含まれているだけです。
テンプレートを取得し、htmlをjQueryオブジェクトに解析すると、idで内部要素を見つけることができます。
var mainTemplate = $('#main').html();
var $newElement = $(mainTemplate);
console.log( $newElement.find('#mimg').prop('outerHTML') );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<template id="main">
<div class="jumbotron">
<img id="mimg" class="media-object" src="%placeholder">
<div>%placeholder</div>
</div>
</template>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加