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

You can create the div as a jQuery object

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

And then append it anywhere eg

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

The beauty of this is you can create the div and then manipulate it like any jquery object.

于 2013-09-03T14:20:38.287 回答