Question

请考虑以下代码：

<!DOCTYPE html>
<html>
  <style>

 p{ width:200px;  }

 </style>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p><span>Hello</span>, how are you?</p>
<p>Me? I'm <span>good</span>.</p>
<script>
    $(document).ready(function(){$("p").find($("*")).andSelf().css("background-  color","blue"); });
  </script>

 </body>
 </html>

输出是整个文档变成蓝色，而我只想让里面的段落和跨度变成蓝色。

如果我使用$("p").find(" * ") instead of $("p").find($(" * "))，则所有内容都会根据我的需要显示。任何人都可以解决这两种方法之间的区别吗？谢谢！

注意：请大家注意我知道有更简单的方法来做这些事情，但我只是想知道为什么这不起作用..

Answer 1

免责声明：其他答案已经建议更好的选择器实现你的目标，但我知道你想知道为什么andSelf() 最终匹配文档中的所有元素，所以我会尝试解释一下。

首先，如您所知，andSelf()将堆栈上的上一个元素集添加到当前集。因此，在您的情况下，它似乎应该将<p>元素添加到包含其后代的集合中：

$("p")         // match the paragraphs
.find($("*"))  // match all the elements that descend from a paragraph
.andSelf()     // add the paragraphs to the elements above

但是，上面假设find($("*"))是之前的元素集，而这不是这里的情况。关于此的第一个提示来自find()的文档：

从jQuery 1.6开始，我们也可以使用给定的jQuery过滤选择集合或元素。如果我们开始，使用与上面相同的嵌套列表用：
var $allListElements = $('li');
然后传递这个jQuery对象来查找：
$('li.item-ii').find( $allListElements );
这将返回仅包含列表的jQuery集合作为第II项后代的元素。

最后一句话特别有趣：似乎暗示传递给find()的jQuery对象已被过滤，以便匹配原始集合中元素的后代。如果情况确实如此，则逻辑将被反转，之前的元素集最终将变为$allListElements，而不是find()返回的集合。

查看jQuery源代码可以看出发生了什么：

find: function(selector) {
    var self = this, i, l;
    if (typeof selector !== "string") {
        return jQuery(selector).filter(function() {
            for (i = 0, l = self.length; i < l; i++) {
                if (jQuery.contains(self[i], this)) {
                    return true;
                }
            }
        });
    }
    // [...]
}

所以，当你写：

var elements = $("p").find($("*")).andSelf();

你实际上写的相当于：

var self = $("p"), i, l;
var elements = $("*").filter(function() {
    for (i = 0, l = self.length; i < l; i++) {
        if ($.contains(self[i], this)) {
            return true;
        }
    }
}).andSelf();

如您所见，由于逻辑反转，之前的元素集实际上是$("*")而不是find($("*"))返回的集合。因此，文档中的所有元素最终都被andSelf()合法地添加到当前集合中。

Answer 2

如果您想选择所有P只需使用

$(document).ready(function(){
    $("p").css("background-color","blue"); 
});

没有理由让事情复杂化

如果你想选择里面的跨距你可以做类似的事情

$(document).ready(function(){
    $("p > span").css("background-color","blue"); 
});

**更新**

您的查找查询中的选择器属性不好，您不应该像$("*")那样只有"*"。但是$("p").find("*")...只会选择<p>标记内的任何元素，因此使用andSelf跟踪find方法会使选择不明确。

Answer 3

您不必执行任何操作。就这样做。

$(function() { $("p").css('background-color', 'blue'); });

注意：$(function() {});与$(document).ready(function(){});

相同

编辑：由于你有两个，你可能必须这样做：

$(function() { $("p").each(item, function() { item.css('backround-color', 'blue'); })});

Edit2：根据你的评论，你想要这个：

$(function() { $("p").find('span').andSelf().css('background-color', 'blue'); });

Answer 4

你只需要

$("p").css("background-color","blue");

更改文档中的颜色或所有p标记。你做这件事的方式有什么特别的原因吗？

Answer 5

$("*")没有上下文，因此它选择文档中的每个元素。您想要查找当前所选元素中的所有元素，因此您只需将字符串传递给find即可。

但是，这完全没必要了，您可以将样式应用到p（因为span是一个孩子，你也不要将它应用到那个）：

$("p").css("background-color","blue");

请注意，在上面的那一行中，我使用background-color没有空格，与您的问题不同。我猜你写这个问题时只是一个错字，但是如果你在属性名称中加上空格，那就不行了。

Answer 6

$("p").find(" * ")和$("p").find($(" * "))之间的区别在于，在第二个中你传递了find（）一个jquery对象而不是一个常规的选择器字符串。

编辑：我刚试了一下。看起来像添加andSelf（）会让它以某种方式选择整个文档。逻辑过程将是选择p>找到与文档中的所有内容匹配的所有元素＆gt;选择自我（p）＆gt;颜色，但在选择自我位时似乎出错了。

我认为它（andSelf（））只选择传递给find（）的对象，即$（'*'），因此选择所有内容。

jquery find（）方法

6 个答案: