jQuery获取children元素的属性
jQuery get attribute of children element
我在获取子元素的属性方面遇到了一个问题。
$ = 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
你可以这样做。。。
单击后,遍历父li
,然后找到.bear_image
$(abs).on("click", ".first", function(){
var cat = $(this).parents('li').find('.bear_image').attr('alt');
});
onclick闭包函数中的this
是.first
div。此div不包含任何类别为.bear_image
的元素。
如果从选择器中删除.bear_image
,它应该在.first
分区中找到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"));
});
});
.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
子元素。
这个演示(去掉了PHP代码)展示了它是如何工作的。
代码中的以下表达式表示您正在'li'
容器内的类'.first'
上委派单击处理程序。
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"));
});
您的$(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);
});
});
相关文章:
- 锚点元素的href属性自动更改
- 如何使用jquery迭代具有相同属性的html元素并查找onclick事件
- 带有填充属性的SVG矩形显示在包含元素的上方插入框阴影
- 通过id和class属性获取元素
- 如何通过HTML+CSS中的另一个元素Selector更改元素的属性值
- 如何正确引用传递到淘汰中的当前元素的属性.JS
- javascript来显示元素属性
- 自定义HTML元素属性未显示-Web组件
- 如何使用element.myobj.prop等具有对象属性的元素
- 将特定属性动态添加到元素中
- Javascript获取具有不同id的文件数's来自没有多个属性的文件输入元素
- 为什么样式属性不适用于使用DOMParser创建的元素
- .querySelectorAll如何只获取具有所有属性的元素
- 如何使用jQuery按数据日期属性选择元素
- 使用数据属性将HTML数据复制到另一个元素
- JQuery:使用clone()生成的元素不采用原始的事件属性
- 价格滑动过滤器-隐藏父属性元素
- 未捕获的类型错误:不能读取属性'元素不存在
- 将信息存储在变量与数据属性元素中
- 添加HTML5 DATA属性元素存储在Javascript变量