jQuery 如何获取嵌套较深的相同节点
举个例子:
demo.html
<div class="one">
<div class="two">
<div class="three"><button class="btn">Click one</button></div>
</div>
</div>
<div class="one">
<div class="two">
<div class="three"><button class="btn">Click one</button></div>
</div>
</div>
<div class="one">
<div class="two">
<div class="three"><button class="btn">Click three</button></div>
</div>
</div>
请问当我点击第一个 button 后,该如何用 $(this) 如何获得第二个 button 的 text 值.
这里的 3 个 class="one" 的 div 都是可以随意删除的.
jquery web前端开发 前端 前端性能 JavaScript
Messkk
11 years, 4 months ago
Answers
小逗逼嘎嘎嘎
answered 11 years, 4 months ago
原先的答案,没有覆盖动态增删的场景。
var $btnArr = $(".btn") ;
$btnArr.each(function(i,elem){
$btnArr.eq(i).on("click", function(evt){
alert( $btnArr.eq(i+1).text() ) ;
});
});
新答案:
既然题目变成了动态增删,个人认为最优的答案已经由@KevinYue给出,美刀符只出现了一次,省资源:)
那么我来一个原生方案好了。扩展一下,假设它们有一个共同的父级#container.
var cont = document.getElementById("container") ,
children = cont.getElementsByClassName("btn") ;
cont.addEventListener("click",function(evt){
var target = event.target ,
curChildrenArr = Array.prototype.slice.call(children) ,
indexOfTarget = curChildrenArr.indexOf(target);
if( indexOfTarget < curChildrenArr.length - 1 ) {
alert(curChildrenArr[indexOfTarget+1].innerText)
}
},false) ;
http://jsfiddle.net/ruart0vz/1/
知识点在于
getElementsByClassName
返回的是一个live node list,每次调用都会查询最新版本的DOM,因此不会有更新问题。
星Dsym
answered 11 years, 4 months ago