Question

为什么以下代码无法正常工作？（选择div之前的所有元素，使用class = clear？）

HTML：

<div id="text">    
    line0
    <div>line1</div>
    <div>line2</div>

    <div class="clear" />        
    <div>dummy</div>
    <p>dummy</p>        
</div>

JS：

var allow = true;    
var output = $('#text *').filter(function(index) {        
    if( $(this).attr("class") == 'clear') {
        allow = false;
    }

    return allow;        
}).html().trim();

alert( output );

输出：

line1

期望值： line0 一号线 LINE2

Answer 1

这是因为.html()说

获取匹配集中第一个元素的HTML内容元件。

因此，虽然选择了两个div，但只有一个由.html()

返回

选中此fiddle以验证代码是否返回两个元素。

正如其他人已经说过的那样，你应该使用.hasClass方法。

<强>更新

由于line0不在任何节点内，因此它是textNode，您可以首先在textNodes周围循环并添加span标签。或者您无法将样式应用于该文本。请检查以下代码

var whitespace = /^\s*$/;
$('#text').contents().filter(function(){
    return this.nodeType == 3 && !whitespace.test(this.nodeValue);
}).wrap('<span></span>');

循环遍历所有childNodes（包括textnodes）并使用span包装非空格文本节点。

之后，你的line0将在<span>line0</span>之类的span标签内。所以现在如果你做了

$('.clear').prevAll().css('color', 'red');

它也会突出显示line0。

检查MDN上的Node Types文档

Working Fiddle

Answer 2

因为html（）方法返回选择器中第一个元素的内容。

http://api.jquery.com/html/

如果选择器表达式匹配多个元素，则只返回第一个匹配的HTML内容。

Answer 3

$('.clear').prevAll().css('color', 'red').fadeOut(2000);

Live DEMO

顺便说一句，如果你想检查一个元素是否有一个类使用.hasClass(class)
示例：

var hasClass = $(this).hasClass('clear');

jQuery过滤器和html返回奇怪的结果

3 个答案: