3

我有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是否与文本相同，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 中？

4

4 回答 4

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

演示

关于上面的代码见@fudgey 评论。

更精确地

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

演示

相关参考：

于 2012-08-06T13:36:02.083 回答
5

我有几个:contains()可能有用的 jQuery 选择器扩展（原始要点）

/* 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();

最后一个扩展使用正则表达式，这很有用，但可能不适用于您的情况:)

于 2012-08-06T13:46:45.430 回答
0

像这样：

循环虽然每个.fieldset-item找到.text()匹配的那个t。添加CSS。

$('.fieldset-item').each(function(i, item){
    if ($(item).text() == t){
        $(item).css('display', 'block');
    }
});

或像@helmus 提到的，但随后使用 t 变量：

$(".fieldset-item:contains('" + t + "')", ".items-list-container")
     .css('display', 'block');
于 2012-08-06T13:35:21.027 回答
0

试试这个

$(".fieldset-item:contains('Something 2')", ".items-list-container").css('display', 'block');
于 2012-08-06T13:36:57.453 回答