如何使用jQuery在div中找到相同的文本？

Question

我有html:

<div class="items-list-container">
   <div class="fieldset-item">Something</div>
   <div class="fieldset-item">Something 2</div>
   <div class="fieldset-item">Something 3</div>
   <div class="fieldset-item">Something 4</div>
   <div class="fieldset-item">Something 5</div>
</div>

我需要找出jQuery,如果变量t与text in相等,fieldset-item如果是 - 将fieldet-itemclass css 设置为:display: block.例如,如果

t = "Something 2"

HTML应如下所示:

   <div style="display: block;" class="items-list-container">
       <div class="fieldset-item">Something</div>
       <div style="display: block;" class="fieldset-item">Something 2</div>
       <div class="fieldset-item">Something 3</div>
       <div class="fieldset-item">Something 4</div>
    </div>

我可以在div中找到所有文本:

var text = $(".items-list-container").text();

我应该如何将css添加到特定的匹配div？

Answer 1

$('.items-list-container .fieldset-item:contains("'+ t +'")').css('display', 'block');

DEMO

关于上面的代码,请参阅@fudgey评论.

更精确地

$('.items-list-container .fieldset-item').filter(function() {
    return $(this).text().trim() == t;
}).css('display', 'block');

DEMO

相关参考:

• :包括()

• .过滤()

Answer 2

我有一些jQuery :contains()选择器的扩展可能很有用(原始要点)

/* jQuery selector to match exact text inside an element
 *  http://wowmotty.blogspot.com/2010/05/jquery-selectors-adding-contains-exact.html
 *  :containsExact()     - case insensitive
 *  :containsExactCase() - case sensitive
 *  :containsRegex()     - set by user ( use: $(el).find(':containsRegex("/(red|blue|yellow)/gi")') )
 */
$.extend( $.expr[":"], {
    containsExact: $.expr.createPseudo ?
        $.expr.createPseudo(function(text) {
            return function(elem) {
                return $.trim(elem.innerHTML.toLowerCase()) === text.toLowerCase();
            };
        }) :
        // support: jQuery <1.8
        function(elem, i, match) {
            return $.trim(elem.innerHTML.toLowerCase()) === match[3].toLowerCase();
        },

    containsExactCase: $.expr.createPseudo ?
        $.expr.createPseudo(function(text) {
            return function(elem) {
                return $.trim(elem.innerHTML) === text;
            };
        }) :
        // support: jQuery <1.8
        function(elem, i, match) {
            return $.trim(elem.innerHTML) === match[3];
        },

    containsRegex: $.expr.createPseudo ?
        $.expr.createPseudo(function(text) {
            var reg = /^\/((?:\\\/|[^\/])+)\/([mig]{0,3})$/.exec(text);
            return function(elem) {
                return reg ? RegExp(reg[1], reg[2]).test($.trim(elem.innerHTML)) : false;
            };
        }) :
        // support: jQuery <1.8
        function(elem, i, match) {
            var reg = /^\/((?:\\\/|[^\/])+)\/([mig]{0,3})$/.exec(match[3]);
            return reg ? RegExp(reg[1], reg[2]).test($.trim(elem.innerHTML)) : false;
        }

});

所以使用上面的代码,你可以这样做:

$('div:containsExact("Something 2")').show();

或者用于区分大小写的搜索:

$('div:containsExactCase("Something 2")').show();

最后一个扩展使用正则表达式,这很有用但可能不在你的情况下:)