javascript - 通过 jQuery 隐藏第二个表行中的跨度

Question

我有一个在 flask 中生成的表:

<table class="table" id="preferencesTable">
  <thead>
    <th>
      <span>Fall 2016 Course Preferences</span>
      <span id="addPreference" class="glyphicon glyphicon-plus-sign pull-right"></span>
    </th>
  </thead>
  <tbody>
    {% for row in data.course_preferences %}
        <tr id="{{row.id}}">
          <td>
            {{ row.name }}
            <span class="pull-right">
              <span class="glyphicon glyphicon-arrow-up icon_padding"></span>
              <span class="glyphicon glyphicon-arrow-down icon_padding"></span>
              <span class="glyphicon glyphicon-remove icon_padding></span>
              <span class="glyphicon glyphicon-remove icon_padding></span>
            </span>
          </td>
        </tr>
    {% endfor %}
  </tbody>
</table>

我想让向上和向下箭头移动表格行的顺序。因为第一个表格行(不包括标题)位于顶部，所以不需要向上箭头。我想隐藏这个箭头。

我可以通过以下方式找到该跨度:

$('#preferencesTable tr:nth-child(2) span')[2]

返回

<span class=​"glyphicon glyphicon-arrow-down icon_padding">​::before​</span>​

但是我失去了显示和隐藏跨度的所有能力(.css、.hide 等不再有效)。

如何只在第一行隐藏这个跨度？

Answer 1

需要访问表的tbody下的第一个child，然后可以找到class为glyphicon-arrow-up的span > 并隐藏它。此外，使用 [2] 访问 span 将返回一个 dom 元素引用而不是 jQuery 对象，因此您将无法使用它调用任何 jQuery 方法。

tr:nth-child(2) 将选择 tr，它是其父级的第二个子级，在本例中它将选择第二个 tbody

中的 tr

$('#preferencesTable tbody tr:first-child span.glyphicon-arrow-up').hide()