如何使用jQuery定位第一个div？

Question

I am new to jquery, so please bear with me. I need to find a way to always get the first div from every series of divs with the same class that appears on a page so that I can add them some specific css styling to it. So technically I need something similar to :first-child in css.

I tried using .first() but that only got me the first div from the first series of 'divs' with that class name.

Example:

<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

You can use this CSS selector:

*:not(.expl) + .expl

This will target any .expl element immediately following a non .expl element. Obviously you can use jQuery for that, or not, depending on your requirements.

Working example

Answer 2

Try to wrap your div sets in another div like this:

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

Then it would be easy to select first div inside wrapper.

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

UPDATE: Maybe something like this:

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

Answer 3

Based on Sunyatasattva's CSS answer, the jQuery equivalent is the following (using the Next Adjacent Selector of JQuery):

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

A working example can be seen on this JsFiddle

To break it down:

• $(".expl:first") - find the very first div
• .add(":not(.expl) + .expl") - also include any element with the expl class which is immediately preceded by a sibling which is not an element with expl class.

See https://api.jquery.com/next-adjacent-Selector/ for a bit more detail.

Answer 4

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

This is a much more robust solution though.

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/