1

为什么以下代码不能按预期工作？（使用 class = clear 选择 div 之前的所有元素？）

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 line1 line2

4

3 回答 3

3

发生这种情况是因为正如.html()所说

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

因此，尽管您的两个 div 都被选中，但只有一个被返回.html()

检查此小提琴以验证您的代码是否返回了两个元素。

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

更新

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

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

这将遍历所有子节点（包括文本节点）并用span.

因此，在那之后，您的 line0 将位于像<span>line0</span>. 所以现在如果你这样做

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

它也会突出显示line0。

检查MDN 上的节点类型文档

工作小提琴

于 2012-06-14T14:18:08.847 回答
2

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

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

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

于 2012-06-14T14:17:36.973 回答
1 
$('.clear').prevAll().css('color', 'red').fadeOut(2000);​

现场演示

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

var hasClass = $(this).hasClass('clear');
于 2012-06-14T14:10:50.320 回答