javascript - 使用 JQuery 选择具有特定类的所有 元素

Question

基本结构是一个只有几行的表格。我希望表格的上半部分显示，下半部分折叠，直到用户单击“阅读更多”单元格。我可以使用该功能，但无法正确选择所有“.collapseThis”行并在页面加载时隐藏它们的 JQuery。

这是表格

<div id="tables">
    <table class="expandableTable">
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr class="accordion">
            <td colspan="2">READ MORE</td>
        </tr>
        <tr class="collapseThis">
            <td></td>
            <td></td>
        </tr>
    </table>
    <table class="expandableTable">
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr class="accordion">
            <td colspan="2">READ MORE</td>
        </tr>
        <tr class="collapseThis">
            <td></td>
            <td></td>
        </tr>
    </table>
</div>

这是 JQuery。

$(document).ready(function () {

    function getCollapsable($row) {
        var children = [];
        while ($row.next().hasClass('collapseThis')) {
            children.push($row.next());
            $row = $row.next();
        }
        return children;
    }

    function hideTableRows($row) {
        children = getCollapsable($row);
        $.each(children, function () {
            $(this).toggle();
        });
    }

    $('#tables').each($('expandableTable'), function () {
        hideTableRows($(this).children().hasClass('.accordion'));
});

Answer 1

可以直接用css设置显示值，不需要用jQuery设置初始状态。

如果您想使用 jQuery，请使用一个简单的选择器，例如 $('#tables .expandableTable .collapseThis').hide()。

$(document).ready(function() {

  //if you don't want to use css
  //$('#tables .expandableTable .collapseThis').hide();
});

#tables .expandableTable .collapseThis {
  display: none;
}

<div id="tables">
  <table class="expandableTable">
    <tr>
      <td>1.1</td>
      <td>1.2</td>
    </tr>
    <tr class="accordion">
      <td colspan="2">READ MORE</td>
    </tr>
    <tr class="collapseThis">
      <td>2.1</td>
      <td>2.2</td>
    </tr>
  </table>
  <table class="expandableTable">
    <tr>
      <td>1.1</td>
      <td>1.2</td>
    </tr>
    <tr class="accordion">
      <td colspan="2">READ MORE</td>
    </tr>
    <tr class="collapseThis">
      <td>2.1</td>
      <td>2.2</td>
    </tr>
  </table>
  <table class="expandableTable">
    <tr>
      <td>1.1</td>
      <td>1.2</td>
    </tr>
    <tr class="accordion">
      <td colspan="2">READ MORE</td>
    </tr>
    <tr class="collapseThis">
      <td>2.1</td>
      <td>2.2</td>
    </tr>
  </table>
</div>