jQuery按类选择下一个div_Jquery_Css Selectors

jQuery按类选择下一个div

jquery

jQuery按类选择下一个div,jquery,css-selectors,Jquery,Css Selectors,我有以下HTML： <div class="row"> <div class="fourcol "> <a class="getNote" id="1" href="#">Create a Skybox</a> </div> <div class="fourcol "> <a class="getNote" id="2" href="#">Add images to sky box</a> </

我有以下HTML：

<div class="row">
<div class="fourcol "> <a class="getNote" id="1" href="#">Create a Skybox</a> </div>
<div class="fourcol "> <a class="getNote" id="2" href="#">Add images to sky box</a> </div>
<div class="fourcol last"> <a class="getNote" id="3" href="#">Delete a sky box</a> </div>
<div class="row">
    <div class="twelvecol noteDetails"></div>
</div>
<div class="fourcol "> <a class="getNote" id="4" href="#">Change a skybox</a> </div>
<div class="fourcol "> <a class="getNote" id="5" href="#">Cool a skybox</a> </div>
<div class="fourcol last"> <a class="getNote" id="6" href="#">Hey a skybox</a> </div>
<div class="row">
    <div class="twelvecol noteDetails"></div>
</div>
<div class="fourcol "> <a class="getNote" id="7" href="#">one more</a> </div>
<div class="row">
    <div class="twelvecol">
        <div class="noteDetails"></div>
    </div>
</div>

但它不起作用

编辑：我真正想做的是，例如，如果我单击id为4的链接，那么我想更新最接近的.noteDetails（在本例中是第二个.noteDetails）

您正在尝试执行以下操作：

$("div.noteDetails").first()

您是否正在尝试执行以下操作：

$("div.noteDetails").first()

为您提供

div class=“row”

将其放在某个地方进行测试，向每个noteDetails类添加一些额外的类，以查看是否选择了正确的类

document.write($("div .noteDetails").first().attr("class"));

这应该只打印所需div的类名，而不打印其他名称

因此，为了进行测试，在第一个noteDetails div中添加一个class

first

，在下一个中添加一个class

second

，依此类推

它应该首先显示

tweevecol noteDetails

作为输出

为您提供

div class=“row”

将其放在某个地方进行测试，向每个noteDetails类添加一些额外的类，以查看是否选择了正确的类

document.write($("div .noteDetails").first().attr("class"));

这应该只打印所需div的类名，而不打印其他名称

因此，为了进行测试，在第一个noteDetails div中添加一个class

first

，在下一个中添加一个class

second

，依此类推

它应该首先显示twelveCol noteDetails作为输出。

由于HTML设置的方式，您所要求的实际上有点困难。您还缺少很多结束标记

如果他们是直系亲属，那么搜索东西就容易多了。在

.row

div中添加另一个包含详细信息的类，如

class=“row rowDetails”

，将使此操作变得更简单

这将发现下一个使用您当前的HTML

$( "a.getNote" ).click( function( event ) {
    // traverse up to the "row"
    var noteDetails = $( this ).closest(".row")
    // find the next siblings that contain a .noteDetails
            .nextAll().has( ".noteDetails" )
    // limit to the first match
            .first()
    // and then find the .noteDetails it contained
            .find(".noteDetails");
});

如果要按照我的建议更改HTML，则可以将

.nextAll（）.has（“.noteDetails”）

替换为

.nextAll（.rowDetails”）

。使用类作为选择器来

nextAll（）

将比使用筛选快得多。