2015-12-02 132 views
1

我有一个关于获取子元素属性的问题。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

+3

'div.first'没有孩子的班级'.bear_image' –

+0

尝试'console.log(猫);'首先看看你的选择器是否得到任何元素 –

+0

事情是,divs不相关他们是单击时单击我必须在其他div中进行操作。 – user2204367

回答

0

$.on()函数内你$(this)变化范围:

尝试:

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

abs可能是LI的列表,所以如果你使用'abs。孩子',你不会知道你会以哪一个“.bear_image img”结尾! –

+0

谢谢,现在修复 –

0

您的代码中的以下表达式意味着您正在委托'.first'中的'li'容器内的点击处理程序。

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

first没有bear_image有一个子类。

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

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

this在onclick闭合功能是.first股利。此div不包含任何类.bear_image的元素。

如果您从选择器中删除.bear_image,它应该在.first div中找到img

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

你可以做这样的事情......

点击后,遍历父li然后找到.bear_image

$(abs).on("click", ".first", function(){ 
    var cat = $(this).parents('li').find('.bear_image').attr('alt'); 
}); 
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代码删除)显示了这是如何工作的。