jquery find 获取第一个元素
Posted
技术标签:
【中文标题】jquery find 获取第一个元素【英文标题】：jquery find to get the first element 【发布时间】：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 函数。
【参考方案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');
【讨论】：
以上是关于jquery find 获取第一个元素的主要内容，如果未能解决你的问题，请参考以下文章