在前端开发中，我们经常需要根据特定条件选择 DOM 元素并进行操作。本文介绍如何使用 jQuery 根据特定类名选择首尾元素，并提供示例代码和实用技巧。
选择第一个和最后一个特定类名的元素
想要选择某个类名的第一个元素或最后一个元素，可以使用以下代码：
// 选择第一个特定类名的元素
$(".classname:first")
// 选择最后一个特定类名的元素
$(".classname:last")这里 ".classname" 表示你想要选择的元素的类名，":first" 和 ":last" 分别表示选择第一个和最后一个匹配的元素。例如，如果你有如下 HTML 结构：
<div class="classname">第一个</div> <div>其他</div> <div class="classname">中间的</div> <div class="classname">最后一个</div>
那么上述代码将会选择第一个元素和最后一个元素：
$(".classname:first") // 返回第一个 <div class="classname">
$(".classname:last") // 返回最后一个 <div class="classname">选择特定类名的第一个和最后一个子元素
如果你想要在一个父元素内选择特定类名的第一个和最后一个子元素，可以使用以下代码：
// 选择第一个特定类名的子元素
$("parent .classname:first")
// 选择最后一个特定类名的子元素
$("parent .classname:last")这里 $("parent") 表示你想要选择的父元素，可以是任何有效的 jQuery 选择器。例如，如果你有如下 HTML 结构：
<div id="container"> <div class="classname">第一个</div> <div>其他</div> <div class="classname">中间的</div> <div class="classname">最后一个</div> </div>
那么以下代码将会选择第一个和最后一个特定类名的子元素：
$("#container .classname:first") // 返回 <div class="classname">第一个</div>
$("#container .classname:last") // 返回 <div class="classname">最后一个</div>使用实用技巧
除了上述方法外，我们还可以使用一些实用技巧来选择特定类名的首尾元素。
选择第一个特定类名的元素
我们可以使用 .eq() 方法选择匹配条件中的第一个元素：
$(".classname").eq(0)这里 ".eq(0)" 表示选择第一个匹配条件的元素。注意，.eq() 方法返回的是 jQuery 对象，而不是原始 DOM 元素。
选择最后一个特定类名的元素
我们可以结合 .length 属性和 .eq() 方法选择匹配条件中的最后一个元素：
$(".classname").eq($(".classname").length - 1)这里 ".length" 表示匹配条件的元素个数，"-1" 表示选择最后一个元素。
选择特定类名的第一个和最后一个子元素
我们可以使用 .first() 和 .last() 方法选择父元素内的第一个和最后一个特定类名的子元素：
// 选择第一个特定类名的子元素
$("parent .classname").first()
// 选择最后一个特定类名的子元素
$("parent .classname").last()注意，.first() 和 .last() 方法返回的是 jQuery 对象，而不是原始 DOM 元素。
总结
本文介绍了如何使用 jQuery 选择特定类名的首尾元素，并提供了一些实用技巧。在前端开发中，正确地选择和操作 DOM 元素是非常重要的。希望本文能对你有所
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31146