javascript - jQuery 如何获取嵌套较深的相同节点
黄舟
黄舟 2017-04-10 14:48:49
[JavaScript讨论组]

举个例子:

demo.html

<p class="one">
  <p class="two">
    <p class="three"><button class="btn">Click one</button></p>
  </p>
</p>
<p class="one">
  <p class="two">
    <p class="three"><button class="btn">Click one</button></p>
  </p>
</p>
<p class="one">
  <p class="two">
    <p class="three"><button class="btn">Click three</button></p>
  </p>
</p>

请问当我点击第一个 button 后,该如何用 $(this) 如何获得第二个 button 的 text 值.

这里的 3 个 class="one" 的 p 都是可以随意删除的.

黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

全部回复(5)
迷茫

借用公子的fiddle改了一下,供参考,主要是使用了closest这个方法。

http://jsfiddle.net/whxvaeou/5/

原来之前的评论中已经提到了呀,重复了,呵呵。

大家讲道理
  1. 所有button加id,通过id直接取
  2. 层次结构明确的情况下$(this).parent().parent().parent().next().find('button').text();

jquery主要就是dom操作,所以页面结构布局在设计方面就得考虑清楚。具体业务具体处理,并没有什么通用的解决办法。

PHPz

原先的答案,没有覆盖动态增删的场景。

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,因此不会有更新问题。

黄舟
//http://jsfiddle.net/whxvaeou/2/
$(function() {
    $(document).on("click", ".btn", function() {
        var btns = $(".btn");
        for(var i=0, l=btns.length; i<l; i++) {
            if(btns[i] == this && i != l) {
                $(btns[i+1]).css('color', 'red');
                break;
            }
        }
    })

});
怪我咯

var tt = $("button").eq(1).text();
alert(tt);

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号