jquery per trovare tutte le partite esatte td

Question

$('#servertable td:eq(' + server + ')') 

questo trova solo 1 (prima penso) corrisponde, come trovare tutte le partite. btw. td: contiene non funzionerà per me.

Answer 1

eq si aspetta che un indice numerico restituisca una sola riga. Se vuoi abbinare un td al suo contenuto, devi usare il selettore :contains. Dire "non funziona" e buttarlo via non è l'approccio giusto al problema, poiché il selettore è (molto probabilmente) non in errore (Prendi nota della sua distinzione tra maiuscole e minuscole, che potrebbe essere ...)

In ogni caso, se si dispone di una tabella come questa:

<table> 
    <tr> 
    <td>Hello</td> 
    <td>World</td> 
    </tr> 
    <tr> 
    <td>World</td> 
    <td>Hello</td> 
    </tr> 
    <tr> 
    <td>Hello</td> 
    <td>Hello</td> 
    </tr> 
</table> 

questo codice jQuery:

$(function() { 
    $("td:contains('Hello')").css('color','red'); 
}); 

girerà tutte le cellule con "Ciao" al rosso. Demo.

Se hai bisogno di una tra maiuscole e minuscole, si potrebbe fare questo, utilizzando la funzione filter:

$(function() { 
    var search = 'HELLO'.toLowerCase(); 
    $("td").filter(function() { 
     return $(this).text().toLowerCase().indexOf(search) != -1; 
    }).css('color','red'); 
}); 

Se è necessario abbinare i esatte contenuto della cella, si potrebbe usare qualcosa di simile alla sopra:

$(function() { 
    var search = 'HELLO'.toLowerCase(); 
    $("td").filter(function() { 
     return $(this).text().toLowerCase() == search; 
    }).css('color','red'); 
}); 

Quanto sopra è case insensitive (ruotando sia la ricerca ed i contenuti per abbassare caso quando si confrontano) altrimenti si può semplicemente rimuovere quelli se si vuole maiuscole e minuscole. Demo.

Answer 2

$('#servertable td') 

troverà tutti gli elementi di td, ma non è del tutto chiaro cosa ti aspetti.

Answer 3

mi potrebbe essere sbagliato, ma la :eq positional selector prende un intero n un trova l'elemento corrispondente esimo.

Quindi se hai detto td: eq (1) - otterresti il ​​secondo elemento TD nella tabella (secondo perché il primo indice è zero/0).

La mia ipotesi è che non si voglia utilizzare lo :contains selector perché si sta cercando una corrispondenza di stringa esatta e non si desidera corrispondenze parziali.

Non sono a conoscenza del fatto che jquery ha un selettore incorporato che soddisferà le vostre esigenze (in tal caso, correggetemi). È possibile aggiungerne uno come estensione o utilizzare un altro metodo, come un selettore di attributo per effettuare la ricerca.

Se si è in grado di controllare il codice HTML generato, si potrebbe aggiungere un attributo ID per ogni TD in questo modo:

<table id="servertable" border="1"> 
     <thead> 
      <tr><th>Server</th><th>Memory</th></tr> 
     </thead> 
     <tbody> 
      <tr><td id="server_mars">Mars</td><td>4 GB</td></tr> 
      <tr><td id="server_venus">Venus</td><td>1 GB</td></tr> 
      <tr><td id="server_jupiter">Jupiter</td><td>2 GB</td></tr> 
      <tr><td id="server_uranus">Uranus</td><td>8 GB</td></tr> 
      <tr><td id="server_mars_2010">Mars_2010</td><td>4 GB</td></tr> 
     </tbody> 
    </table> 
    <form> 
     <label for="server">Find:</label><input type="text" id="server" /> 
     <button id="find">Find</button> 
    </form> 

Il seguente selettore di attributo sarebbe individuare il TD corretto nella tabella:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     $("#find").click(function() { 
      var server = $("#server").val(); 
      $("#servertable td").css("background-color", ""); // reset 
      $("#servertable td[id='server_" + server.toLowerCase() + "']").css("background-color", "#FFFF00"); 
      return false; 
     }); 
    }); 
    </script> 

Se invece vuole indirizzare l'intera riga che ha il TD che si sta cercando, è possibile aggiungere ulteriori selettori:

 $("#servertable tbody tr").css("background-color", ""); 
     $("#servertable tbody tr:has(td[id='server_" + server.toLowerCase() + "'])").css("background-color", "#FFFF00"); 

Il tag tbody non è completamente necessario, aiuta solo a distinguere tra le righe nel corpo della tabella e le righe nell'intestazione della tabella.

Answer 4

Anch'io ho riscontrato questo stesso problema dell'autore originale. Come Paulo aveva la domanda originale. Quale selettore posso usare per abbinare i controlli di uguaglianza basati sugli elementi sui contenuti degli elementi. Almeno io presumo che sia quello che ha fatto (come ho fatto io) cercando di ottenere e che spiegherebbe anche perché lui (così come io) non può usare contiene per le ovvie ragioni che RA170 ha sottolineato nel suo commento. In ogni caso, se qualcuno capita di imbattersi qui cercando la risposta a questa domanda, ecco la breve risposta ad esso:

jQuery non ha un tale matcher di default. La soluzione è definire il tuo matcher. Per affrontare il problema, consulta questo eccellente blog post di Motte.

Answer 5

Prova: containsExact

http://wowmotty.blogspot.com/2010/05/jquery-selectors-adding-contains-exact.html

$.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 RegExp(reg[1], reg[2]).test($.trim(elem.innerHTML)); 
    }; 
    }) : 
    // support: jQuery <1.8 
    function(elem, i, match) { 
    var reg = /^\/((?:\\\/|[^\/]))\/([mig]{0,3})$/.exec(match[3]); 
    return RegExp(reg[1], reg[2]).test($.trim(elem.innerHTML)); 
    } 

});