Question

我是jquery的新手，所以请耐心等待。我需要找到一种方法来始终从每个div系列中获得第一个div，并使用与页面上显示的相同的类，以便我可以为它添加一些特定的CSS样式。所以从技术上讲，我需要类似于css中:first-child的东西。

我尝试使用.first()，但只获得了第一个具有该类名称的'divs'系列中的第一个div。

示例：

<div class="expl">....</div> <!-- need to target this div-->
<div class="expl">....</div>
<div class="expl">....</div>

<h1>....</h1> - this is just an example, we can have any other html tag/content here
<div class="expl">....</div> <!-- and this div-->
<div class="expl">....</div>
<div class="expl">....</div>

<p>....</p>
<div class="expl">....</div> <!-- and this div-->
<div class="expl">....</div>
<div class="expl">....</div>

Answer 1

您可以使用此CSS选择器：

*:not(.expl) + .expl

这将紧跟非.expl元素之后的任何.expl元素。显然，你可以根据自己的要求使用jQuery。

Working example

Answer 2

尝试将div集包装在另一个div中，如下所示：

<div class="exp-wrapper">
  <div class="expl">....</div> <!-- need to target this div-->
  <div class="expl">....</div>
  <div class="expl">....</div>
</div>
<h1>....</h1>
<div class="exp-wrapper">
   <div class="expl">....</div> <!-- and this div-->
   <div class="expl">....</div>
   <div class="expl">....</div>
</div>

<p>....</p>
<div class="exp-wrapper">
   <div class="expl">....</div> <!-- and this div-->
   <div class="expl">....</div>
   <div class="expl">....</div>
</div>

然后在包装器中选择第一个div会很容易。

$(".exp-wrapper div:first")

更新：也许是这样的：

$(".expl:first").add($(":not(.expl)").next(".expl"));

Answer 3

基于Sunyatasattva的CSS答案，jQuery等效如下（使用JQuery的Next Adjacent Selector）：

var theThingsIWant = $(".expl:first").add(":not(.expl) + .expl");

可以在此JsFiddle

上看到一个工作示例

要打破它：

$(".expl:first") - 找到第一个div
.add(":not(.expl) + .expl") - 还包含expl类的任何元素，该元素后面紧跟一个兄弟，而不是一个expl类的元素。

有关详细信息，请参阅https://api.jquery.com/next-adjacent-Selector/。

Answer 4

var divs = [$("div.expl").first(),
$("h1").first().next("div.expl").first(),
$("p").first().next("div.expl").first()];

这是一个更强大的解决方案。

var selectAfter = function(what,whichIsAfter) {
    return $(what).filter(function() {
        return $(this).prev().not(what).is(whichIsAfter);
    });
}
var divs = selectAfter("div.expl","*").add("div.expl:first");

jsfiddle - http://jsfiddle.net/5gTcC/1/

如何用jquery来定位第一个div？

4 个答案: