Question

我有一个在烧瓶中生成的表：

<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

Arun P Johny给出的答案似乎是正确的。

我另外创建了一个jsfiddle：Click here to see the demo

您可以将此JS放在事件处理程序中，以便在某些操作中它始终隐藏第一行的向上箭头。

$('selector').eventName(function(){
      $('#preferencesTable tbody tr:first-child span.glyphicon-arrow-up').hide();
});

Answer 2

我认为问题在于，当你使用方括号运算符时，你会获得一个vanilla JavaScript DOM对象。请参阅：https://learn.jquery.com/using-jquery-core/faq/how-do-i-pull-a-native-dom-element-from-a-jquery-object/

您可以通过在$()中包装该DOM对象来获取jQuery对象来解决它，如下所示：

var firstRowSpan = $('#preferencesTable tr:nth-child(2) span')[2];
firstRowSpan = $(firstRowSpan);
firstRowSpan.hide();

另请参阅：convert DOM to jQuery

通过jQuery隐藏第二个表行中的span

2 个答案: