.find 和 .contents 不起作用答案

【问题标题】：.find and .contents not working.find 和 .contents 不起作用
【发布时间】：2012-08-30 04:35:43
【问题描述】：

如果我的父母div 的孩子有.ads 的班级，那么它应该alert('true') 否则alert('false')。但是我的函数在这两种情况下都返回true。这是jsFiddle链接http://jsfiddle.net/F3EXf/

<head>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function(){
            if($('#me').find('.ads')){
                alert('true')
            } else {
                alert('false')
            }
        });
    </script>
</head>
<body>
    <div id="me">
        <div class="noads">aaaa</div>
    </div>
</body>

嗨 vega 请看下面的截图

【问题讨论】：

因为在您的示例中没有 ads 类......但有一个“noads”类。
是的，你是对的，但它应该返回 false
仅当您检查选择器长度时。选择错误的元素不会在 jQuery 中触发错误，它只是默默地失败。
像其他人说的，检查“长度”
但是为什么返回true，背后的原因是什么

标签： javascript jquery html

【解决方案1】：

小提琴链接：http://jsfiddle.net/F3EXf/8/

1.如果您需要查找元素的子元素，请立即使用 Children()。 2.另外，尝试计算选择器产生的元素，然后确定它是否可用

$(function(){
    var children = $('#me').children('.noads');
if(children.length > 0){
    alert('true')
    }

    else {
        alert('false')

        }
})

对于演示，请查找上面提供的小提琴链接。

回答你的问题，为什么如果元素不存在它会提示为真。

它返回一个空数组但不是一个空数组...这意味着它在结果对象中有一些信息但长度为“零”但实际上它不是空或未定义

【讨论】：

【解决方案2】：

我通常这样做：

if(typeof variable != 'undefined')

所以在你的情况下：

if(typeof variable[0] != 'undefined'){

因为.find函数返回一个数组。

代码

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(function(){
                var variable = $('#me').find('.ads');
                if(typeof variable[0] != 'undefined'){
                    alert('true')
                } else {
                    alert('false')
                }
            });
        });
    </script>
</head>
<body>
    <div id="me">
        <div class="noads">aaaa</div>
    </div>
</body>
</html>

您可以找到有关typeof variable != 'undefined' here 的信息。

【讨论】：

【解决方案3】：

所有 jQuery selectors 和 traversing 函数都返回一个 jQuery 对象。 jQuery 对象是一个类数组对象，具有属性和对核心函数的引用。

一个小例子展示了 jQuery 对象http://jsfiddle.net/Tj9e8/1/ 中随时可用的属性和函数列表

当您将 jQuery 函数调用为 $(selector) 时，它会创建一个 jQuery 对象，其中包含基于选择器的匹配元素的包装列表。

例如：当您执行$('#test') 时，它会创建一个jQuery 对象并包装ID 为test 的DOM 元素。

从 jQuery 的 .init 函数中检查以下代码 sn-p 以处理 ID 选择器

elem = document.getElementById(match[2]); 
//match[2] is string 'test' in '#test' that was passed to $('#test')

if (elem && elem.parentNode) {
   if (elem.id !== match[2]) {
      return rootjQuery.find(selector);
   }
   //below 2 lines allows the jQuery object to behave like array like objects
   this.length = 1;
   this[0] = elem; //elem is nothing but the dom node.
}
this.context = document;
this.selector = selector;
return this; //Returns jQuery object

For more information check out the .init function code

下面是$('#test')的快照。

你可以看到长度为 0，但 $ 函数仍然返回长度为 0 的 jQuery 对象。这是为了保护下一个链式调用而不是抛出错误。

在大多数情况下，我们选择一个元素在其上运行某些功能..

例如： $('#test').addClass('example')。

使用$('#test') 和字符串参数'#test' 调用的jQuery 函数
上面的 jQuery 调用 .init 来确定参数的类型并返回一个包含匹配元素的 jQuery 对象（如果有，则只是 jQuery 对象）。

在 jQuery 对象上调用 .addClass，它在内部迭代匹配的元素列表并将类添加到元素中。下面是来自.addClass的sn-p函数代码

if (value && typeof value === "string") {
    classNames = value.split(core_rspace);
    for (i = 0, l = this.length; i < l; i++) { 
    //^-- This is where it iterate over matched elements
        elem = this[i];
        if (elem.nodeType === 1) {

现在要注意的是，

$函数总是返回一个jQuery对象
jQuery 对象只不过是一个带有以下内容的 javascript 对象

一个。包装的匹配元素集An example using .find

b.属性 - Sample that lists properties

c。函数 - Sample that lists functions

HTML：

<ul>
    <li>Test</li>
    <li class="red">Test</li>
    <li>Test</li>
    <li class="red">Test</li>
</ul>

JS：

var $lisample = $('ul').find('.red');

.find 的结果不是包装的匹配元素集如下所示，

更多阅读

【讨论】：

感谢您非常清楚地解释它。您已经发布了带有 DOM 的屏幕截图。我想检查我的选择器的长度，以便如何在 DOM 中检查它。像你一样
我在 DOM 中搜索 .sub 类，功能完美。但是当我查看 DOM 时，它显示它的长度为 0。这里是 jsfiddle.net/rRNkb。我在我的问题中附上了 DOM 屏幕截图
@amit 你看到快照了吗.. 选择器是"".. 我无法复制你提到的问题.. 你的小提琴工作正常.. 除了缺少@ 987654352@标签。
感谢回复，我只想知道如何在 DOM 中查看选择器的长度
@amit $(selector).length 将返回选择器的长度（意味着匹配的元素计数）。如果这是你想要的。如果不是，请发布示例并告诉我你的期望以及返回的内容..

【解决方案4】：

 $(function () {
        if ($('#me').find('.ads').length>0) {
            alert('true');
        } else {
            alert('false');
        }
    });

【讨论】：

不需要> 0，因为 0 = false，以上所有内容都将被视为 true。

【解决方案5】：

要检查元素是否存在，请改用

if ($('#me').find('.ads').length) {
   ...
}

因为$('#me').find('.ads') 将始终返回 true（它返回一个评估为 true 值的 jQuery 包装的空对象），即使 find() 的目标元素不存在

【讨论】：

你能详细说明一下吗？为什么在所有情况下都返回 true
因为.find()方法允许我们在DOM树中搜索这些元素的后代，并从匹配的元素中构造一个新的jQuery对象。
find() 创建一个 jQuery 包装的节点集合，在任何情况下都评估为 true。对您而言重要的是检查该集合是否为空
@fabrizio：我想了解更多关于 jQuery 包装节点集合的信息。你能给我推荐任何与 jQuery 包装节点相关的文章或内容吗