Javascript 如何使用jquery定位第一个div？

我是jquery的新手，所以请容忍我。我需要找到一种方法，总是从页面上出现的具有相同类的每个div系列中获取第一个

div

，以便我可以向其中添加一些特定的css样式。所以从技术上讲，我需要类似于css中的第一个孩子的东西

我试着使用

.first（）

，但这只得到了第一个

div

，它来自于具有该类名的第一系列“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>

。。。。
....
....
.... - 这只是一个例子，我们可以在这里有任何其他html标记/内容
.... 
....
....

.... 
....
....

尝试将您的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>

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

更新： 也许是这样的：

<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>

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

---

尝试将您的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>

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

更新： 也许是这样的：

<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>

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

不过，这是一个更稳健的解决方案

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-

不过，这是一个更稳健的解决方案

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");

---

jsIDLE-

您可以使用此CSS选择器：

*:not(.expl) + .expl

这将针对紧跟在非

.expl

元素之后的任何

.expl

元素。显然，您可以使用jQuery来实现这一点，也可以不使用，这取决于您的需求

---

您可以使用此CSS选择器：

*:not(.expl) + .expl

这将针对紧跟在非

.expl

元素之后的任何

.expl

元素。显然，您可以使用jQuery来实现这一点，也可以不使用，这取决于您的需求

---

根据Sunyatasattva的CSS答案，jQuery等价物如下（使用jQuery的名称）：

在这方面可以看到一个工作示例

要分解它：

• $（“.expl:first”）

  -查找第一个div

• .add（“：not（.expl）+.expl”）

  -还包括任何带有

  expl

  类的元素，该类前面紧跟一个不是

  expl

  类元素的同级元素

---

请参阅了解更多详细信息。

根据Sunyatasattva的CSS答案，jQuery等价物如下（使用jQuery的名称）：

在这方面可以看到一个工作示例

要分解它：

• $（“.expl:first”）

  -查找第一个div

• .add（“：not（.expl）+.expl”）

  -还包括任何带有

  expl

  类的元素，该类前面紧跟一个不是

  expl

  类元素的同级元素

---

请参阅以获取更多详细信息。

根据您的示例，您需要以第1、4和7个div为目标。尝试此

$（'div.expl'）。eq（3n）

，它将以第1、4和7个div为目标。这只是一个随机示例。我可以有不同数量的div和它们之间的任何其他内容。任何情况下我都需要一些更具动态性的东西。试试这些

$（'div.expl'）。首先（）

和

$（'h1，p'）。接下来（'div.expl'）

或

$（'div.expl'）。首先（）

和

$（'h1+div.expl，p+div.expl'）

根据您的示例，您需要针对第1、第4和第7个div。试试这个

$（'div.expl'）。eq（3n）

，它的目标是第一、第四和第七分区。这只是一个随机的例子。我可以有不同数量的div和它们之间的任何其他内容。任何情况下，我都需要一些更具动态性的东西。试试这些

$（'div.expl'）。首先（）

和

$（'h1，p'）。接下来（'div.expl'）

或

$（'div.expl'）。首先（）

和

$（'h1+div.expl，p+div.expl'）

我做不到，div是由一个插件生成的，我必须保持它的简单性，不向它添加任何其他内容。我不能这样做，div是由一个插件生成的，我必须保持它的简单性，不向它添加任何其他内容。完美。这正是我需要的。我不知道那个*：不是财产。在您添加答案之前，我正在考虑添加每个html标记+.expl，这仍然不够好，因为它没有涵盖在使用.expl.Perfect的div之前有一个div的情况。这正是我需要的。我不知道那个*：不是财产。在您添加答案之前，我正在考虑添加每个html标记+.expl，这仍然不够好，因为它没有涵盖在使用.expl的div之前有一个div的情况。谢谢您的解决方案。这也很有效，但我最终还是使用了css，这更符合我的风格。当然，没问题：）如果是用于样式设计，那么css绝对是一种方式。如果您需要对它们进行一些代码操作，那么至少javascript也有一种方法。谢谢您的解决方案。这也很有效，但我最终还是使用了css，这更符合我的风格。当然，没问题：）如果是用于样式设计，那么css绝对是一种方式。如果您需要对它们进行一些代码操作，那么至少也有一种使用javascript的方法。