在jQuery中，如何找到具有特定文本的單元格的行？

Question

我有以下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”的行。

Answer 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"))
  }

}

隨便問:)

Answer 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的特定ID而不是訂單，您可以：

這將排除帶有id #result1的tr

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

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

Answer 3

要使用jQuery查詢包含特定文本的元素，可以使用:contains() selector 。

在下面的代碼片段，我問所有的td包含title ，然后篩選出td這是兒童$tr 。

然后我循環查看剩余的查詢td並打印他們的tr的id。

 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> 

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