jQuery获取children元素的属性

时间:2015-12-02 17:44:41

标签: javascript php jquery

我有一个关于获取子元素属性的问题。

$ = 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"));
    });
});

显示未定义。

这是我的php代码:

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

我需要输出.bear_image img

的alt

5 个答案:

答案 0 :(得分:2)

.bear_img不是.first的孩子,所以你必须做一点遍历:

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

在这里,我找到最接近的列表元素祖先,然后找到祖先的.bear_image子元素。

demo(删除了PHP代码)显示了其工作原理。

答案 1 :(得分:1)

你可以这样做......

点击后,转到父li,然后找到.bear_image

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

答案 2 :(得分:0)

您的$(this)更改$.on()功能范围:

尝试:

$ = 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);
    });
});

答案 3 :(得分:0)

代码中的以下表达式意味着您将'.first'容器内的类'li'上的单击处理程序委派给代理。

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

first没有bear_image有子类。

您需要使用bear-image函数跳转到类closest的元素,然后找到img元素。

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

答案 4 :(得分:0)

onclick闭包函数中的this.first div。此div不包含任何具有类.bear_image的元素。

如果您从选择器中移除.bear_image,则应在img div中找到.first

$ = 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"));
    });
});