代码之家 › 专栏 › 技术社区 › ultrarun

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

jquery javascript

ultrarun · 技术社区 · 6 年前

我希望在表格单元格中找到与h1标题中的文本匹配的文本,然后删除包含不匹配文本的所有其他表格行。下面的例子只在有一个表的情况下工作。TabelReo包含一个.TabelEnter,所以我需要针对任何.TabeCell找到一个与H1标题中的日期匹配的对象。我已经看过了。包含和 不(:包含 (等等,但不知道如何表述这一点。

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>

如有任何帮助,我们将不胜感激。

5 回复 | 直到 6 年前

connoraworden 6 年前

你可以用 .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>

caramba 6 年前

注: 我已经更改了表中的数据以获得与标题匹配的元素。你的例子没有匹配项,因为里面的文本 <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>

Ricardo Pontual 6 年前

你可以使用 :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>

Muhammad Ali 6 年前

$(".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>

Pre'P 6 年前

您可以使用每个功能来实现这一点:

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

我希望这对你有帮助:-)