javascript - 如何通过索引隐藏 HTML 行？

Question

我试图根据索引隐藏 HTML 表格的某些行，但出现错误:

TypeError: $rows[0].hide is not a function

我做错了什么？

HTML:

<tbody id="searchable">
        <c:forEach var="lot" items="${pageResult.entries}" varStatus="status">
            <tr title="<c:out value='${lot.description}'/>">
            <td><c:out value='${lot.nom}'/></td>
            <td><fmt:formatNumber value="${lot.id}" pattern="0000"/></td>
            <td><c:out value='${lot.priorite}'/></td>
            <td>
                <form:form class="actionForm" action="detail" method="POST">
                    <input type="hidden" name="lotId" value="<c:out value='${lot.nom}'/>"/>
                    <input type="submit" class="action editer" value="Editer"/>
                </form:form>
                <form:form class="actionForm" action="supprimer" method="POST" onsubmit="return confirm('Confirmer la suppression?')">
                    <input type="hidden" name="lotId" value="<c:out value='${lot.nom}'/>"/>
                    <input type="submit" class="action supprimer" value="Supprimer"/>
                </form:form>
            </td></tr>
        </c:forEach>
</tbody>

Javascript:

var $rows = $('#searchable tr');
$(document).ready(function(){
    $rows[0].hide();
});

Answer 1

您可以使用 eq() , 选择你想要的项目:

Given a jQuery object that represents a set of DOM elements, the .eq() method constructs a new jQuery object from one element within that set. The supplied index identifies the position of this element in the set.

var $rows = $('#searchable tr');
$(document).ready(function() {
  $rows.eq(0).hide();
  console.log($rows[0])
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody id="searchable">
    <tr>
      <td>First Tr</td>
      <td>value1</td>
      <td>value2</td>
      <td>value3</td>
    </tr>
    <tr>
      <td>Second Tr</td>
      <td>value1.2</td>
      <td>value2.2</td>
      <td>value3.2</td>
    </tr>
  </tbody>
</table>

---

为什么 $rows[0] 不起作用？？

因为 $()[index] 为您提供了 DOM 元素//检查代码段上的控制台；但是为了应用 hide() 事件，您需要 eq() 为您提供的 Jquery 对象。

更多引用Get an element by index in jquery