1

我有一段文字，我需要将每组单词（逗号分隔）包装在一个跨度标签中，这样我就可以在悬停时为它们设置动画......很容易。我需要对除“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 选择器，即如果它是正确的选择器。谢谢你

4

2 回答 2

2

$('#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()函数中正在执行的操作以拆分和包装文本节点。

于 2012-07-12T21:25:12.687 回答
1

问题是它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>';
});
于 2012-07-12T21:28:37.387 回答