Блог

Главная - Вопросы по программированию - В jQuery, как мне найти строки, в которых есть ячейка с определенным текстом?

В jQuery, как мне найти строки, в которых есть ячейка с определенным текстом?

#jquery #css-selectors #matching

#jquery ( jquery ) #css-селекторы #соответствие

Вопрос:

У меня есть следующая HTML — таблица…

 <table>
    <tr id="result1">
        <td class="title">Orange</td>
        <td>12</td>
        <td>37</td>
    </tr>
    <tr id="result2">
        <td class="title">Apple</td>
        <td>12</td>
        <td>37</td>
    </tr>
    <tr id="result3">
        <td class="title">Orange</td>
        <td>12</td>
        <td>37</td>
    </tr>
    <tr id="result4">
        <td class="title">Lemon</td>
        <td>12</td>
        <td>37</td>
    </tr>
</table>

Допустим, у меня есть первый ряд…

 var $tr = $('#result1');
var title = $tr.find('td.title').text();

Как в jQuery мне найти все остальные строки в таблице, в которых есть ячейка TD с классом «title», текст которой соответствует тому, что у меня есть в моей переменной «title»? Обратите внимание, что в приведенном выше примере единственным результатом будет строка с id=»result3″.

Ответ №1:

JSFIDDLE

я просто искал через tr, кроме того, что я выбираю. затем я сопоставляю его заголовок с выбранным заголовком

 let allRow = $("tr");
let selectedRow = $("tr#result1")
let selectedRowValue = selectedRow.children(".title").text();

for (let i = 0, imax = allRow.length; i < imax; i  ) {

  if (allRow.not(selectedRow).eq(i).children(".title").text() == selectedRowValue) {
    alert(allRow.not(selectedRow).eq(i).attr("id"))
  }

}

не стесняйтесь спрашивать 🙂

Ответ №2:

Вы можете использовать $("table tr:not(:first-child)") в качестве селектора. При этом будут выбраны все tr (кроме первого, поскольку вы уже запрашиваете его). filter Используйте для перебора и проверки текста. tr 

 var $tr = $('#result1');
var title = $tr.find('td.title').text();

var rows = $("table tr:not(:first-child)").filter(function() {
  return $(this).find('.title').text() === title;
});

//For testing | add class to the result
rows.addClass("select"); 
 .select {
  background-color : pink;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr id="result1">
    <td class="title">Orange</td>
    <td>12</td>
    <td>37</td>
  </tr>
  <tr id="result2">
    <td class="title">Apple</td>
    <td>12</td>
    <td>37</td>
  </tr>
  <tr id="result3">
    <td class="title">Orange</td>
    <td>12</td>
    <td>37</td>
  </tr>
  <tr id="result4">
    <td class="title">Lemon</td>
    <td>12</td>
    <td>37</td>
  </tr>
</table>

Если вы хотите исключить конкретный идентификатор tr вместо порядка, вы можете:

Это исключит tr с идентификатором #result1 

 var $tr = $('#result1');
var title = $tr.find('td.title').text();

var rows = $("table tr:not(#result1)").filter(function() {
    return $(this).find('.title').text() === title;
})

Ответ №3:

Чтобы запросить элемент, содержащий определенный текст, с помощью jQuery, вы можете использовать :contains() selector .

В приведенном ниже фрагменте я запросил все td , что содержит title , а затем отфильтровал td дочерний элемент $tr .

Затем я перебираю оставшиеся запрошенные td файлы и печатаю их tr идентификатор.

 var $tr = $('#result1');
var title = $tr.find('td.title').text();

// Get all td.title containing title text
var $tdTitle = $(`td.title:contains(${title})`);

// Filter out the result that is under $tr
var $otherTdTitle = $tdTitle.filter(function(index, td) {
  return $(td).parent().attr('id') !== $tr.attr('id');
});

$otherTdTitle.each(function(index, td) {
  console.log($(td).parent().attr('id'));
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tr id="result1">
        <td class="title">Orange</td>
        <td>12</td>
        <td>37</td>
    </tr>
    <tr id="result2">
        <td class="title">Apple</td>
        <td>12</td>
        <td>37</td>
    </tr>
    <tr id="result3">
        <td class="title">Orange</td>
        <td>12</td>
        <td>37</td>
    </tr>
    <tr id="result4">
        <td class="title">Lemon</td>
        <td>12</td>
        <td>37</td>
    </tr>
</table>

Ответ №4:

Вам просто нужно объединить предложенный :contains() селектор с parent() или parents() . Проверьте приведенный ниже код.

 var selector = $("td:contains('Orange')").parent('tr');
$(selector).addClass('highlighted'); 
 .highlighted {
background-color: red;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tr id="result1">
        <td class="title">Orange</td>
        <td>12</td>
        <td>37</td>
    </tr>
    <tr id="result2">
        <td class="title">Apple</td>
        <td>12</td>
        <td>37</td>
    </tr>
    <tr id="result3">
        <td class="title">Orange</td>
        <td>12</td>
        <td>37</td>
    </tr>
    <tr id="result4">
        <td class="title">Lemon</td>
        <td>12</td>
        <td>37</td>
    </tr>
</table>
Метки: