Question

我有一段文字，我需要在span标记中包含每组单词（以逗号分隔），这样我就可以在悬停时为它们设置动画......很简单。除了“a #close”之外，我需要做到这一点。我已经尝试使用“：not”选择器，但似乎无法使其按预期工作。

HTML

<div id="stuff"><p>Words Words Words, Words Words Words, Words Words Words, Words Words
Words, Words Words Words, Words Words Words, Words Words Words,
<a href="#" id="close">Close</a></p></div>

的jQuery

$(function() {
    $('#stuff:not(a#close)').each(function(){
    var text = $(this).html().split(','),
        len = text.length,
        result = []; 

    for( var i = 0; i < len; i++ ) {
      result[i] = '<span>' + text[i] + '</span>';
    }
    $(this).html(result.join(' '));
});

我可以通过更改html标记并将a＃close放在带有不同ID的ap标签中来实现所需的工作，但是想要更好地理解：not selector，即如果它是正确的使用。谢谢

Answer 1

$('#stuff:not(a#close)')会选择ID为stuff的所有元素，但那些也匹配选择器a#close的元素除外。实际上，:not在这种情况下并没有做任何事情。考虑使用.contents()

var words = [];
$('#stuff p').contents(':not(a#close)').each(function() {
  words.push($(this).text().split(','));
});
// "words" is now an array of the comma separated strings.

http://jsfiddle.net/s9K7W/

当然，这有点抽象。在您的情况下，您将修改.each()函数中要执行的操作以拆分和包装文本节点。

Answer 2

问题是a#close是容器的子项。您可以选择所有节点，然后过滤：

$('#stuff *').filter(':not(a#close)').each(function(){
var text = $(this).html().split(','),
        len = text.length,
        result = []; 

    for( var i = 0; i < len; i++ ) {
      result[i] = '<span>' + text[i] + '</span>';
    }
    $(this).html(result.join(' '));
})

你也可以在那里使用map函数来避免循环：

var result = text.map(function(text){
    return '<span>' + text + '</span>';
});

不能从字符串中排除元素

2 个答案: