CODEWITHSUNDEEP
javascriptjquerycss-selectors
Lox
Lox

Reputation: 299

how to target the first div with jquery?

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>

Upvotes: 1

Views: 563

Answers (4)

Matt Tester
Matt Tester

Reputation: 4814

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.

Upvotes: 1

scaryman
scaryman

Reputation: 1900

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/

Upvotes: 0

Sunyatasattva
Sunyatasattva

Reputation: 5840

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

Upvotes: 2

Oleksii Aza
Oleksii Aza

Reputation: 5398

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

Upvotes: 1

Related Questions