jQuery的：包含 - 排除在後代匹配文本

http://api.jquery.com/contains-selector/

匹配文本可以將選定元件內直接出現，在任何元素的後代，或它們的組合。

如何省略在該元素的後代中具有匹配文本的元素。我只想獲得匹配文本直接出現在所選元素內的元素。

在下面的示例中，我只希望包含單詞「紅色」的跨度有紅色文本。

<span>Green 
    <span>Red</span> 
</span> 
<span>Red</span> 

jQuery("span:contains('Red')").css("color","red");

http://jsfiddle.net/UNydR/2/

來源

2013-08-22 wkm

嘗試：

jQuery("span:contains('Red')").filter(function() { 
    return ($(this).text() == 'Red') 
}).css("color", "red");

jsFiddle example

來源

2013-08-22 19:49:24 j08691

這隻有當你要匹配整個字符串作品。我不認爲這是OP想要的。 –

如果「Red」不是Div中的整個字符串，這將不起作用。 – Itay

我會將$（this）.text（）=='Red''更改爲'$（this）.text（）。indexOf（'Red'）> -1' –

jQuery的不提供內置的方式來處理這個問題。你必須通過子文本節點環和搜索手動您的字符串：

$('span').each(function() { 
    var span = this; 
    $.each(span.childNodes, function() { 
     if (this.nodeType == 3 && this.nodeValue.indexOf('Red') >= 0) { 
      $(span).css('color', 'red'); 
      return false; 
     } 
    }); 
});

這裏的小提琴：http://jsfiddle.net/TEnX7/

如果你發現你使用了很多，你不「T希望有寫出來的時候，你可以創建自己的自定義過濾器表達式：

jQuery.expr[':']['contains-direct'] = $.expr.createPseudo(function(text) { 
    return function (elem) { 
     var contains = false; 
     $.each(elem.childNodes, function() { 
      if (this.nodeType == 3 && this.nodeValue.indexOf(text) >= 0) { 
       contains = true; 
       return false; 
      } 
     }); 
     return contains; 
    } 
});

然後你就可以在你的代碼直接使用它，就像jQuery的contains：

$('span:contains-direct(Red)').css('color', 'red');

這裏的小提琴：http://jsfiddle.net/F9xZ8/

來源

2013-08-22 19:52:45

jQuery的：包含 - 排除在後代匹配文本

回答

相關問題