jQuery get attribute of children element

Question

I have an issue regarding getting the attributes of the children elements.

$ = jQuery;

$(document).ready(function(){
    //var cat =  $(".bear_image").children("img").attr("alt");
    var abs = $("li");
    $(abs).on("click", ".first", function(){
        var cat = $(this).children(".bear_image img");
        console.log(cat.attr("alt"));
    });
});

It shows undefined.

Here is my php code:

    <li>
        <input type="hidden" name="bear-id" value=<?php echo $bears['id']; ?>>
        <div class="bear_image"><img src="<?php echo $bears['nuotrauka']['url'];?>" alt=<?php echo $bears['id']; ?>></div>
        <div class="icons">
            <div class="first" id="1"><?php echo '<img src="' . content_url( '/themes/NutMEDIA/images/bow.png', __FILE__ ) . '" > '; ?></div>
            <div class="second" id="2" ><?php echo '<img src="' . content_url( '/themes/NutMEDIA/images/tie.png', __FILE__ ) . '" > '; ?></div>
            <div class="third" id="3"><?php echo '<img src="' . content_url( '/themes/NutMEDIA/images/heart.png', __FILE__ ) . '" > '; ?></div>
        </div>
        <div style="clear:both;"></div>
        <p class="bear_description"><?php echo $bears['aprasymas'];?></p>
    </li>

I need to output the alt of .bear_image img

Answer 1

.bear_img is not a child of .first , so you have to do a little traversing:

var abs = $("li");
$(abs).on("click", ".first", function () {
    var cat = $(this).closest(abs).find(".bear_image img");
    console.log(cat.attr("alt"));
});

Here I find the closest list element ancestor, then find the .bear_image child of the ancestor.

This demo (with PHP code removed) shows how this works.

Answer 2

You could do something like this...

On click, traverse to the parent li then find the .bear_image

$(abs).on("click", ".first", function(){
   var cat = $(this).parents('li').find('.bear_image').attr('alt');
});

Answer 3

Your $(this) changes scope within the $.on() function:

Try:

$ = jQuery;

$(document).ready(function(){
    //var cat =  $(".bear_image").children("img").attr("alt");
    var abs = $("li");
    abs.on("click", ".first", function(){
        var cat = $(this).closest('li').children(".bear_image img");
        console.log(cat);
    });
});

Answer 4

The following expression in your code means you are delegating the click handler on class '.first' inside the 'li' container.

var abs = $("li");
$(abs).on("click", ".first", function(){ 

Class first doesn't have bear_image has a child class.

You need to hop to the element with class bear-image using the closest function and then find the img element.

var abs = $("li");
    $(abs).on("click", ".first", function(){
            var cat = $(this).closest('.bear_image').find("img"); 
            console.log(cat.attr("alt"));
        });

Answer 5

Your this in the onclick closure function is the .first div. This div does not contain any element with a class .bear_image .

If you remove the .bear_image from the selector it should find the img in the .first div.

$ = jQuery;

$(document).ready(function(){
    //var cat =  $(".bear_image").children("img").attr("alt");
    var abs = $("li");
    $(abs).on("click", ".first", function(){
        var cat = $(this).children("img");
        console.log(cat.attr("alt"));
    });
});