jquery find 获取第一个元素答案

【问题标题】：jquery find to get the first elementjquery find 获取第一个元素
【发布时间】：2011-01-11 13:14:20
【问题描述】：

我正在写$(this).closest('.comment').find('form').toggle('slow');，问题是孩子中的每个表单都被切换了。我只想切换第一个表单。 html 类似于下面的内容，这是一个链接

<div comment>
<a href>
<form>
</form>
    <a href>
    <div comment>
    <form>
    </form>
    </div>
</div>

【问题讨论】：

这个问题你已经得到了很好的答案，但是下次请花点时间看看文档。 JQuery 有很好的文档记录，如果您只是在寻找它，您会很容易自己找到:first 选择器...docs.jquery.com/Main_Page
我找到了但找不到。我不擅长 jquery，这是我第二次使用它。我刚刚学习了基础知识，已经在这个和我的上一个问题上花了 1 个小时
也许您没有查看 api.jquery.com，而是查看了 docs.jquery.com 的旧文档，我不得不同意，由于旧文档的结构，它曾经非常很难找到像这样的简单 API 函数。

标签： javascript jquery

【解决方案1】：

你可以使用任何一个

$(this).closest('.comment').find('form').eq(0).toggle('slow');

或

$(this).closest('.comment').find('form:first').toggle('slow');

【讨论】：

第二个选项对我有用，我必须选择第一个 div jQuery(this).closest('.divmodule').find('div:first').attr('class'));
仅供参考，$('.foo:first') 比 $('.foo').first() 慢很多。 jsperf.com/jquery-first-vs-first-vs-eq-0-vs-0/2
如果你真的关心性能，原生 getElementsByTagName 会更快：jsperf.com/jquery-first-vs-first-vs-eq-0-vs-0/16
这是否首先遍历树然后选择第一个元素？还是在找到第一个元素后以某种方式停止？我问是因为我正在处理具有数百个嵌套节点的树，但只想选择第一个匹配元素。我想知道这种方法在这种情况下是否效率很低。

【解决方案2】：

使用:first 选择器，如下所示：

$(this).closest('.comment').find('form:first').toggle('slow');

【讨论】：

【解决方案3】：

使用 jquery 只需使用：

    $( "form" ).first().toggle('slow');

【讨论】：

【解决方案4】：

我用

$([selector]).slice(0, 1)

因为这是选择查询片段的最明确的方式，并且可以轻松修改它以匹配不是第一个元素而是下一个元素，等等。

【讨论】：

【解决方案5】：

获得find 的第一个结果的最简单方法是使用旧的[index] 运算符：

$('.comment').find('form')[0];

像魅力一样工作！

【讨论】：

【解决方案6】：

使用下面的例子进行 jquery find 获取第一个元素

More filtring methods With Demo

$(document).ready(function(){
  $(".first").first().css("background-color", "green");
});

.first{
    padding: 15px;
    border: 12px solid #23384E;
    background: #28BAA2;
    margin-top: 10px;
}

<!DOCTYPE html>
<html>
<head>
<title>jQuery First Method Example By Tutsmake</title> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
</head>
<body>
 
<h1>This is first() method example</h1>
 
<div class="first">
  <p>A paragraph in a div.</p>
  <p>Another paragraph in a div.</p>
</div>
<br>
 
<div class="first">
  <p>A paragraph in another div.</p>
  <p>Another paragraph in another div.</p>
</div>
<br>
 
<div class="first">
  <p>A paragraph in another div.</p>
  <p>Another paragraph in another div.</p>
</div>
 
</body>
</html>

【讨论】：

【解决方案7】：

你可以这样使用

$(this).find('>.comment').find('>form').toggle('slow');

【讨论】：