JQuery Get Next first element class name

Question

var cName = ($(".myclass").next().attr('class'));
alert(cName);

if (cName == "c1") {

$("#Output").addClass("green");
$("#Output").removeClass("red");

} else {

$("#Output").addClass("red");
$("#Output").removeClass("green");
}

<p class="myclass">If you click on me, I will disappear.
<span class="c1"></span>
<span class="c2"></span>
<span class="c3"></span>
<span class="c4"></span>
<div class="d1"></div>
<div class="d2"></div>
<div id="Output" style="width:25px; height:25px;"></div>
</p>

I am trying to get the .classname of the first span element. Why is jquery not fetching the next span element .classname ? Please help.

`span` is the child of `
` so `.next()` wont work. Use `$(".myclass span:first")` — Shaunak D, Jun 25 '15 at 05:30

score 1 · Answer 1 · answered Jun 25 '15 at 05:25

next() is getting the sibling of the p element, not the first child. To get the first child, do

var cName = $(".myclass").children().first().attr('class');

console.log($(".myclass").children().first().attr('class'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<p class="myclass">If you click on me, I will disappear.
  <span class="c1"></span>
  <span class="c2"></span>
  <span class="c3"></span>
  <span class="c4"></span>
  <div id="Output" style="width:25px; height:25px;"></div>
</p>

Thanks Ammar, how to get class of first div child ? inside .myclass div there is different tags. i need to get 1st div element class name. — PRANAV, Jun 25 '15 at 05:50

Nagaraj S · Answer 2 · 2015-06-25T06:48:10.503

0

var cName =($(".myclass").next().attr('class'));

Here next() element will get the next <p> sibling and not the span element..If you need to get next span element use this

var cName =$(".myclass span:first-child").attr('class');

edited Jun 25 '15 at 06:48

answered Jun 25 '15 at 06:07

Nagaraj S

13,316
6
32
53

var cName =$(".myclass span:first").attr('class'); not working. getting 'undefined' error. :( – PRANAV Jun 25 '15 at 06:16
it must be `first-child` not `first` – Amin Jafari Jun 25 '15 at 06:47

score 0 · Answer 3 · edited May 23 '17 at 12:29

It is not a proper way to define div tag inside p tag. And hence you are unable to access those child div elements.The opening div tag will automatically close the p tag. Because end tag of <p> elements are optional know.

It means <p> tags can contain only the inline elements.

<!ELEMENT P - O (%inline;)*            -- paragraph -->

Block elements are not allowed to define inside the <p> elements.

Please refer the following link, which describes about the block and inline elements in detail:

http://www.w3.org/TR/html401/struct/text.html#h-9.3.1

And also refer the following stack overflow links which has been already discussed:

Putting <div> inside <p> is adding an extra <p>

Why <p> tag can't contain <div> tag inside it?

Hope this helps you....

JQuery Get Next first element class name

3 Answers3