5

$() 経由で作成された HTML/DOM は、ドキュメントに追加されるまで検索できないことがわかりました。これは予想どおりですか、それとも何か間違っていますか?

var html = "<div data-test='test'>testdiv</div>";

// Convert HTML string to an orphaned JQ DOM object
var dom = $(html);

// Search orphaned DOM for element(s) with the specified attr
var found1 = dom.find('[data-test]');
// --> found1.length == 0, why not 1?

// Now insert the orphaned DOM into the document
$('#content').html(dom);

// And now JQ will find the desired elements
var found2 = $('[data-test]');
// --> found2.length is 1, as expected

ここにデモがあります： http://jsfiddle.net/5dVc8/

アップデート

私の最初の質問は単純すぎることがわかりました。

@RocketHazmatの回答は、私が最初に尋ねたことに実際に対処していましたが、その情報を使用しようとすると、十分に具体的ではないことがわかりました。

ルートおよび/または子の要素を一致させる必要があることがわかりました。@RocketHazmat が言うように、.find() は子に一致しますが、.filter() はルートにのみ一致します。

更新されたスニペットとデモ用の新しいフィドルを次に示します。

var html = "<div data-test='test1'>";     // Root
html += "<div data-test='test2'></div>";  // Child
html += "</div>";

// Convert HTML string to an orphaned JQ DOM object
var dom = $(html);

// Search orphaned DOM object for element(s) with the specified attr
// (We'll find none)
var found1 = dom.find('[data-test]');
$('#count1').html('count1='+found1.length+", val="+found1.attr('data-test'));

// Search orphaned DOM object for element(s) with the specified attr
// (We'll find none)
var found2 = dom.filter('[data-test]');
$('#count2').html('count2='+found2.length+", val="+found2.attr('data-test'));


// Now append the orphaned DOM to the document
$('#content').html(dom);

// And now JQ will find the desired elements
var found3 = $('[data-test]');
$('#count3').html('count3='+found3.length);

および更新されたフィドル: http://jsfiddle.net/XyDSg/2/

4

2 に答える 2

7

.filter()の代わりに使ってみてください.find()。

var found1 = dom.filter('[data-test]');

.find()すべての子を検索します。あなたの場合、'[data-test]'は「ルート」要素なので、必要.filter()です。

アップデート：

HTML を別の でラップする<div>と.find()、必要に応じて機能します。

var dom = $('<div>'+html+'</div>');
var found1 = dom.find('[data-test]');

他の場所に追加するときは、忘れずに削除してください。

$('#content').html(dom.html()); // This "removes" the parent `<div>`
于 2013-09-03T14:16:41.200 に答える
-1

div を jQuery オブジェクトとして作成できます

var myDiv = jQuery('<div/>', {
                    'data-test' : 'test'
                  });

そして、どこにでも追加します。

$('#myElement').append(myDiv);

これの優れた点は、div を作成してから、jquery オブジェクトのように操作できることです。

于 2013-09-03T14:20:38.287 に答える