$("selector").find和$("selector").contents().find()的jquery ()方法的区别

Question

通过获取元素的偏移量，我有两种导航方法：

 $("#selector").contents().find('#'+list1).each(function(){
     var offset= $(this).offset();
 }); 


 $("#selector").find('#'+list1).each(function(){
     var offset= $(this).offset();
 }); 

有成千上万的链接。我发现在这两个代码中，有几个链接将偏移量返回为0。什么是最完美的方法让它成为傻瓜的证据？

注释：所有节点都显示为block，并显示在选择器div中。我不能用document.getElementById()。

Answer 1

这两个人在搜索内容上是不同的。如果要find()的元素是contents()返回的元素之一，则不会返回该项。

参见此示例：

http://jsfiddle.net/Ta2QJ/

<div id="topDiv">
    <div id="targetDiv">
        <div id="innerDiv">
        </div>
    </div>
</div>

console.log($('#topDiv').find('#targetDiv').length); // 1
console.log($('#topDiv').contents().find('#targetDiv').length); // 0

但是，如果您要查找的元素没有由.contents()返回，那么就没有什么区别了。您只需提取当前元素的直接子元素，然后对这些元素调用.find()。

Answer 2

你只需要：

var offset = $('#' + list1).offset();

id属性必须是唯一的，如果不是，您应该处理这个问题。

.contents()只对查找iframes中的元素和获取文本节点和注释非常有用。

Answer 3

发现会更深。它不仅能找到孩子，还能找到孩子们的孩子。

内容与子节点非常相似，但内容也将在直接子集中获取文本节点的例外。话虽如此，我想您可以说，内容，就像子程序一样，只会转到1层，就像find一样，正在做一个选择器，其中所选的对象是根。

这有意义吗？

调用: contents().find("beta")本质上只是将根向下设置1层，实际上，它将为所有子级执行选择器。

例外：

a = $(".myDiv");
b = $(".myDiv").contents().find("li");
c = $(".myDiv").find("li");

在这里，您将看到它将尝试查找内容数组的结果，然后调用find，这意味着它将沿着相应的树运行。

只要是find()，就会做同样的事情。

真正的区别在于什么是对象的“根”的范围。对于b，contents()数组中的每个项都是被搜索的根，而作为另一种方式，.myDiv是根。