Question

我想在与h1标题中的文本匹配的表单元格中找到文本，然后删除所有其他包含不匹配文本的表行。下面的示例仅在以下情况下有效：如果我有一个包含.tablecell的.tabelrow，那么我需要定位任何.tablecell来查找与h1标题中的日期匹配的对象。我看过.contains和 not（：contains （等），但不确定如何表述。

if ( $(".heading").text() == $(".tablecell").text() ) {
//remove the parent element of the non matching strings, i.e. the outer tr
}

HTML

<h1>Fri 18 Jun</h1>
<table>
  <tr class="tablerow">
    <td class="tablecell">Fri 17 Jun</td>
  </tr>
  <tr class="tablerow">
    <td class="tablecell">Sat 18 Jun</td>
  </tr>
  <tr class="tablerow">
    <td class="tablecell">Sun 19 Jun</td>
  </tr>
</table>

感谢您的帮助。

Answer 1

注意：我已经更改了表格中的数据，以获取一个与标题匹配的元素。您的示例没有匹配项，因为<h1>中的文本在<table>

中无处

$('table .tablecell').each(function(){
    if($(this).text() != $("h1").text()) {
        $(this).closest('tr').remove();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Fri 18 Jun</h1>
<table>
  <tr class="tablerow">
    <td class="tablecell">Thu 17 Jun</td>
  </tr>
  <tr class="tablerow">
    <td class="tablecell">Fri 18 Jun</td>
  </tr>
  <tr class="tablerow">
    <td class="tablecell">Sat 19 Jun</td>
  </tr>
</table>

Answer 2

您可以使用.filter()获取所有不符合条件的TD元素，然后使用.closest()获取TR和.remove()它们

添加，您必须将相关的类即heading添加到<H1>元素中

$(".tablecell").filter(function() {
  return $(this).text() !== $(".heading").text();
}).closest('tr').remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="heading">Fri 18 Jun</h1>
<table>
  <tr class="tablerow">
    <td class="tablecell">Thu 17 Jun</td>
  </tr>
  <tr class="tablerow">
    <td class="tablecell">Fri 18 Jun</td>
  </tr>
  <tr class="tablerow">
    <td class="tablecell">Sat 19 Jun</td>
  </tr>
</table>

Answer 3

您可以通过以下方式使用:not:contains：

$('#bt').click(function() {
   var txtMatch = $('h1').text();
   $('td.tablecell:not(:contains("' + txtMatch  + '"))').closest('tr').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Fri 18 Jun</h1>
<table>
<tr class="tablerow">
    <td class="tablecell">Fri 18 Jun</td>
  </tr>
  <tr class="tablerow">
    <td class="tablecell">Fri 17 Jun</td>
  </tr>
  <tr class="tablerow">
    <td class="tablecell">Sat 18 Jun</td>
  </tr>
  <tr class="tablerow">
    <td class="tablecell">Sun 19 Jun</td>
  </tr>
</table>

<button id="bt">Remove</button>

Answer 4

$(".tablecell").each(function(){
   if ( $("h1").text() == $(this).text() ) {
     //remove the parent element of the non matching strings, i.e. the outer tr
        $(this).parent('tr').remove()
    }
})

<h1>Fri 18 Jun</h1>
<table>
 <tr class="tablerow">
   <td class="tablecell">Fri 17 Jun</td>
 </tr>
 <tr class="tablerow">
  <td class="tablecell">Sat 18 Jun</td>
 </tr>
 <tr class="tablerow">
 <td class="tablecell">Sun 19 Jun</td>
  </tr>
</table>

Answer 5

您可以使用每个功能来实现此目的：

        <h1 class="heading">Fri 18 Jun</h1>
        <table>
          <tr class="tablerow">
            <td class="tablecell">Fri 17 Jun</td>
          </tr>
          <tr class="tablerow">
            <td class="tablecell">Fri 18 Jun</td>
          </tr>
          <tr class="tablerow">
            <td class="tablecell">Sun 19 Jun</td>
          </tr>
        </table>
        <script type="text/javascript">
          $( ".tablecell" ).each(function( index ) {
            console.log($( this ).text());
            console.log($( ".heading" ).text());
            if ( $(".heading").text() != $( this ).text() ) {
              $(this).remove();
            }
          });
        </script>

我希望这会对您有所帮助：-）

jQuery删除不匹配文本的父容器

5 个答案: