jQuery能在元素添加到文档之前就找到它们吗？

Question

我发现通过 $() 创建的 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/

- dlchambers

Answer 1

尝试使用 .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>`

- gen_Eric

---

似乎 .filter() 只能找到根节点... 有没有办法同时搜索根节点和子节点？这里是一个更新的演示：http://jsfiddle.net/XyDSg/1/ - dlchambers

@dlchambers：是的，.filter()可以找到根节点（或根节点，例如当执行$('div').filter(...)时）。我认为没有一种内置的方法可以同时搜索两者。 - gen_Eric

@dlchambers：你可以用一个“假”的<div>包装你的HTML，然后使用.find()。 var dom = $('<div>'+html+'</div>'); var found1 = dom.find(...)。 - gen_Eric

我用两种方法的组合解决了它。我创建了一个辅助函数__process()，然后调用__process(dom.filter(selector))，再调用__process(dom.find(selector))。虽然不如单个JQ调用优雅，但它能正常工作！ - dlchambers

Answer 2

你可以将 div 创建为 jQuery 对象。

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

然后将其附加在任何地方，例如

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

最美妙的是，您可以创建该div，然后像任何jquery对象一样操作它。

- dops

---

那并没有真正回答问题。此外，当他执行 $(html) 时，他已经在创建一个 jQuery 对象了。 - gen_Eric