CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ssharma
ssharma

Reputation: 349

how to access correct tag through Jquery

There is a html page with a structure:

<div class="row sem">
 <div class="subject"><h3>A</h3></div>
 <div class="subject"><h3>B</h3></div>
</div>
<div class="row sem">
 <div class="subject"><h3>C</h3></div>
 <div class="subject"><h3>D</h3></div>
</div>

I have attached a hover event on the uppermost div with:

$(".row.sem").hover(function(){
//my code....
});

Now,when I hover on one of these divs,I want to access the inner content of only those h3 elements which are within my hovered div element.

For this,I tried:

var a = $(this).children(["h3"]);
 for(ei in ee){                
   console.log(ei);     
  }

But,this printed much more stuff like fadein,fadeout,scroll....The this object does not contain the inner tags of the hovered div.

Please suggest what is wrong in this implementation.

Thanks.

Upvotes: 0

Views: 78

Answers (4)

Jan Ciołek
Jan Ciołek

Reputation: 1816

If you check MDN documentation for in loop it says that it itarates over "enumerable properties". Check this post also enumarable properties

Check this out.

$(".row.sem").hover(function(){

  // i am list of all headers nested inside element with class "row" and "sem"
  //  elements(array)
  var headers = $(this).find('h3');
   
   // console first element's html from the array.
   console.log($(headers[0]).html())
  

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row sem">
 <div class="subject"><h3>A</h3></div>
 <div class="subject"><h3>B</h3></div>
</div>
<div class="row sem">
 <div class="subject"><h3>C</h3></div>
 <div class="subject"><h3>D</h3></div>
</div>

Upvotes: 1

Oen44
Oen44

Reputation: 3206

Clear and simple.

$(".row.sem").hover(function() {
  $(this).find("h3").each(function() {
    console.log($(this).text());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row sem">
 <div class="subject"><h3>A</h3></div>
 <div class="subject"><h3>B</h3></div>
</div>
<div class="row sem">
 <div class="subject"><h3>C</h3></div>
 <div class="subject"><h3>D</h3></div>
</div>

Upvotes: 2

KyleS
KyleS

Reputation: 401

This will get the content of the h3 child elements of the .row.sem elements. You needed to get all the children of the div you are hovering over. You can access and modify the html content of these children with .html() and I suggest you look into that method. 

$(".row.sem").hover(
  function() {
    console.log($(this).children().text());
  }, function (){}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row sem">
 <div class="subject"><h3>A</h3></div>
 <div class="subject"><h3>B</h3></div>
</div>
<div class="row sem">
 <div class="subject"><h3>C</h3></div>
 <div class="subject"><h3>D</h3></div>
</div>

Upvotes: 2

kosmos
kosmos

Reputation: 4288

.children() collects direct children elements while you're looking for h3. So you could use .find() method or even (more specific) .children('.subject').children('h3').

$(".row.sem").hover(function(){
  // mouse enter
  var a = $(this).find("h3");
  a.each(function(){
    console.log($(this).text());
  });
}, function(){
    // mouse leave
    console.clear();
    // ...
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row sem">
 <div class="subject"><h3>A</h3></div>
 <div class="subject"><h3>B</h3></div>
</div>
<div class="row sem">
 <div class="subject"><h3>C</h3></div>
 <div class="subject"><h3>D</h3></div>
</div>

see: https://api.jquery.com/children/

Upvotes: 4

Related Questions