jQuery过滤两个表行（父和下一个）与下拉答案

【问题标题】：jQuery filter two table rows (parent and next) with drop downjQuery过滤两个表行（父和下一个）与下拉
【发布时间】：2015-01-28 19:59:33
【问题描述】：

我正在尝试根据所选下拉列表过滤两行。我没有显示下一个表格行“饼干”。

$("#filter").change(function () {
$("#thisTable").find("td").each(function () {
    if ($(this).text() != $("#filter").val()) 
        $(this).parent().hide();
    else 
        $(this).parent().show();
    if ($("#filter").val() == "ALL") 
        $(this).parent().show();
});});

http://jsfiddle.net/nope_four/xp7zmpju/

我认为这个问题之前已经被问过并得到了回答，但我的回答是空的。提前致谢。

【问题讨论】：

标签： jquery

【解决方案1】：

固定：http://jsfiddle.net/aravi_vel/xp7zmpju/12/

你只需要循环.cheese td

另外，您需要注意代码中的 .crackers 行。

代码也优化了:)

$("#filter").change(function () {

    if ($(this).val() == "ALL") {
        $("#thisTable").find("tr").show();
        return true;
    }

    $("#thisTable").find(".cheese td").each(function () {

        var $td = $(this).parent();
        var matched = $(this).text() == $("#filter").val();
        $td.toggle(matched);
        $td.next('.crackers').toggle(matched);

    });
});

【讨论】：

【解决方案2】：

您可以在 td 中搜索它的父 tr 具有类 .cheese。当找到匹配项时，显示父项 (tr) 和下一个是 tr，类为 .crackers。我认为您可以将其简化为：

$("#filter").change(function() {
  //change the selector to class cheese children
  $(".cheese td").each(function() {
    if ($(this).text() != $("#filter").val()) {
      $(this).parent().hide();
      //hide next tr(which is the one with class cracker)
      //when doesn't match
      $(this).parent().next().hide();
    } else {
      //show next tr(which is the one with class cracker)
      //when match
      $(this).parent().show();
      $(this).parent().next().show();
    }
    if ($("#filter").val() == "ALL") {     
      $(this).parent().show();
      //add this to show all filter to include cracker class too
      $(this).parent().next().show();
    }

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="filter">
  <option value="ALL">Show All</option>
  <option value="Betty Sue">Betty Sue</option>
  <option value="Jack Jr">Jack Jr</option>
</select>
<table id="thisTable" border="1">
  <tr>
    <th>Name</th>
    <th>Number</th>
  </tr>
  <tr class="cheese">
    <td>ONE</td>
    <td>Betty Sue</td>
  </tr>
  <tr class="crackers">
    <td colspan="2">Details ONE</td>
  </tr>
  <tr class="cheese">
    <td>TWO</td>
    <td>Jack Jr</td>
  </tr>
  <tr class="crackers">
    <td colspan="2">Details TWO</td>
  </tr>
  <tr class="cheese">
    <td>THREE</td>
    <td>Betty Sue</td>
  </tr>
  <tr class="crackers">
    <td colspan="2">Details THREE</td>
  </tr>
  <tr class="cheese">
    <td>FOUR</td>
    <td>Jack Jr</td>
  </tr>
  <tr class="crackers">
    <td colspan="2">Details FOUR</td>
  </tr>
</table>

【讨论】：