Question

如何找到与当前类相同的下一个<div>。

我有<div> class="help"，现在当点击<div>内的按钮时，我想选择具有相同“帮助”类的下一个<div>

<div class="help">  
     <div>....OTHER HTML CONTENT......<div>
     <input type='submit' class='ok'>
</div>
<div>....OTHER HTML CONTENT......<div>
<div class="help"></div>
<div>....OTHER HTML CONTENT......<div>
<div>....OTHER HTML CONTENT......<div>
<div>....OTHER HTML CONTENT......<div>
<div class="help"></div>
<div>....OTHER HTML CONTENT......<div>
<div class="help"></div>

Answer 1

使用nextAll()和:first

的组合

e.g：

$("div.help").click(function() {
    var nextDiv = $(this).nextAll("div.help:first")
});

next()只会搜索直接的兄弟姐妹。

<div></div> <-- if you are here
<div></div> <-- .next() will check this
<div></div> <-- but nothing further on

您当然可以使用next()和循环的组合，例如

// pseudo-code
while element is not div.help, element = element.next()

修改

next()和nextAll()只搜索兄弟姐妹 - 即同一级别的元素。例如：

<div> <-- calling nextAll() from here will search: <div></div> x not this </div> <div> <-- this <div></div> x not this </div> <div></div> <-- this

因此，要使其与多级布局配合使用，您需要先使用parent()和parents()的某种组合，这样您就可以向上导航一个或多个级别。< / p>
parent()将遍历一个级别：

<div> <-- this is the parent() <div></div> <-- of this element </div>

因此，在您的特定示例中，从按钮开始，您希望遍历一个级别，以便与另一个<div class='help'>处于同一级别，然后使用nextAll()查找下一个div。

<div class="help"> // $(this).parent() <div>....OTHER HTML CONTENT......<div> <input type='submit' class='ok'> // $(this) is your starting point </div> <div>....OTHER HTML CONTENT......<div> <div class="help"></div> // $(this).parent().nextAll("div.help:first")

当然，假设您正在处理输入的click事件：

$("input.ok").click(function() { $(this); // in this scope the $(this) refers to the submit button })

Answer 2

.next() - 获取匹配元素集中每个元素的紧随其后的兄弟。如果提供了选择器，则仅当它与该选择器匹配时，它才会检索下一个兄弟。

示例：

<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>


$('li.third-item').next().css('background-color', 'red');

修改

.nextAll()：获取匹配元素集中每个元素的所有后续兄弟，可选择由选择器过滤。

所以在你的情况下

$('div.help').nextAll(''div.help:first).css('background-color', 'red');

Answer 3

demo here

$(document).ready(function() {
    $(".help").click(getNextHelp);
});

function getNextHelp() {
    var nextHelp = $(this).nextAll("div.help:first");
    if(nextHelp.length) {
        alert(nextHelp.html());
    } else {
        alert("that's the last help");
    }
}

根据您的编辑和新请求 -

demo here

$(document).ready(function() {
    $(".help :button").click(getNextHelp);
});

function getNextHelp() {
    var nextHelp = $(this).parent().nextAll("div.help:first");
    if (nextHelp.length) {
        nextHelp.css("background", "red");
    } else {
        alert("that's the last help");
    }
}

Answer 4

好吧，提供一些基本的脚本，由Andrew Hayway＆amp;＆amp;西蒙威利森

function cls(c,tag){
    var r=[];
    var reg=new RegExp("(^|\s)"+c+"($|\s)");
    var e=document.getElementsByTagName(tag||"*");
    for(var i=0;i<e.length;i++){
        if(e[i].className.match(reg))
        r.push(e[i]);
    }
    return r;
}
var helps=cls('help','div');
for(var i=0;i<helps.length;i++){
    helps[i].onclick=function(){
        var next_index=helps.indexOf(this)+1;
        if(helps[next_index]){
            //here is the next dom with the class help
            var next=helps[next_index];
            //then your code...
        }
    }
}

找到与单击的div相同的类的下一个div

4 个答案: