He 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>

Necesito saber con jQuery si la variable t es igual que con el texto en fieldset-item y si es de – establecer fieldet-item clase css para: display: block. Por ejemplo, si

t = "Something 2"

html debe verse como:

   <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>

Puedo encontrar todo el texto en un div con:

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

¿Cómo debo añadir css específicos de juego div?

InformationsquelleAutor Lina | 2012-08-06

4 Comentarios

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

    DEMO

    Sobre el código de arriba ver @fudgey comentario.

    Con más precisión

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

    DEMO

    Relacionados con la ref:

    • +1; pero yo no lo uso contains() porque la búsqueda de Something 2 pondría en Something 22
    • gracias..
    • ¿qué versión de jquery hizo que la prueba esta con el ? me estoy poniendo «TypeError: Object [object object] no tiene ningún método ‘contiene'» con la 1.7.2
    • supongo que todo el mundo asumió que el código funcionó a continuación
    • He añadido la demo para cada
    • +1 para la demostración, en niza ( debería haber hecho que la primera cosa difícil 😉 )

  2. 5

    Tengo un par de extensiones para jQuery :contains() selector que puede ser útil (original gist)

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

    Así que con el código de arriba, usted puede hacer esto:

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

    o para el uso de mayúsculas y minúsculas búsquedas:

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

    La última extensión de los usos de expresiones regulares, lo cual es útil, pero tal vez no en tu caso 🙂

  3. 0

    Como este:

    Bucle, aunque cada uno de .fieldset-item encontrar uno donde .text() coincide con el t. Agregar el css.

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

    o como @helmus mencionado, pero luego, con la t de la variable:

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

Dejar respuesta

Please enter your comment!
Please enter your name here