JQuery, чтобы найти все точные совпадения TD

Question

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

это находит только 1 (сначала я думаю) совпадение, как найти все совпадения. Кстати. TD: Содержимое не будет работать для меня.

Answer 1

eq ожидает, что числовой индекс вернет только одну строку. Если вы хотите сопоставить td по его содержимому, вы должны использовать селектор : содержит . Говорить «это не работает» и выбрасывать его - не правильный подход к проблеме, так как селектор (скорее всего) не виноват (обратите внимание на его регистр, который может быть ...)

Во всяком случае, если у вас есть такой стол:

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

Этот код jQuery:

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

Превратит все ячейки с "Hello" в красный. Демо .

Если вам нужно сопоставление без учета регистра, вы можете сделать это, используя функцию filter:

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

Если вам нужно соответствовать точное содержимое ячейки, вы можете использовать что-то похожее на приведенное выше:

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

Выше не учитывается регистр (путем сравнения поиска и содержимого в нижний регистр при сравнении), в противном случае вы можете просто удалить их, если хотите чувствительность к регистру. Демо .

Answer 2

Я могу ошибаться, но позиционный селектор : eq принимает целое число n и находит n-й соответствующий элемент.

Итак, если вы сказали td: eq (1) - вы получите 2-й элемент TD в таблице (второй, потому что первый индекс равен нулю / 0).

Я предполагаю, что вы не хотите использовать : содержит селектор , потому что вы ищете точное совпадение строк и не хотите частичных совпадений.

Я не знаю, что в jquery есть встроенный селектор, который будет отвечать вашим потребностям (если так, пожалуйста, исправьте меня). Вы можете добавить его в качестве расширения или использовать другой метод, например, селектор атрибутов, чтобы выполнить поиск за вас.

Если вы можете контролировать сгенерированный HTML, вы можете добавить атрибут ID к каждому TD, например, так:

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

Следующий селектор атрибута найдет правильный TD в таблице:

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

Если вместо этого вы хотите настроить таргетинг на всю строку, содержащую искомый TD, вы можете добавить дополнительные селекторы:

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

Тег tbody не является полностью необходимым, он просто помогает различать строки в теле таблицы и строки в заголовке таблицы.

Answer 3

Попробуйте: содержит точный

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

});

Answer 4

Я тоже столкнулся с той же проблемой, что и автор оригинала. Как и у Пауло, был задан оригинальный вопрос. Какой селектор можно использовать для проверки соответствия элементов на основе содержимого элемента. По крайней мере, я предполагаю, что это то, чего он пытался достичь (как и я), и это также объясняет, почему он (как и я) не может использовать содержимое по очевидным причинам, указанным ra170 в его комментарии. В любом случае, если кто-то случайно наткнется здесь в поисках ответа на этот вопрос, вот краткий ответ на него:

jQuery по умолчанию не имеет такого сопоставителя. Решение состоит в том, чтобы определить свой собственный сопоставитель. Чтобы справиться с этой проблемой, посмотрите этот превосходный блог пост от Motte.

Answer 5

$('#servertable td')

найдет все элементы td, но не совсем понятно, что вы ожидаете.