Question

我有以下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>

如何选择带noteDetails类的第一个div？

我试过了：

$('#1').closest("div.noteDetails").html('test');

但它不起作用。

编辑：我真正想要做的是例如，如果我点击ID为4的链接，那么我想更新最接近的.noteDetails（在这种情况下是第二个.noteDetails）

Answer 1

你想做什么：

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

Answer 2

$('div.noteDetails').filter(':first')

Answer 3

$("div.noteDetails:first").html('test');

Answer 4

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

给你div class="row"

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

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

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

因此，要测试，请将类first添加到第一个noteDetails div，将类second添加到下一个，依此类推。

它应显示twelveCol noteDetails first作为输出。

Answer 5

由于您的HTML设置方式，您要求的实际上有点困难。你在这里也缺少很多结束标签......

如果他们是直接的兄弟姐妹，那么搜索更容易。在包含.row等详细信息的class="row rowDetails" div上添加另一个类会使这更容易。

这会使用您当前的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()选择器的类比使用.has()进行过滤要快得多。

Answer 6

试试这个：

$("#1").next(".noteDetails").html("test");

jQuery按类选择下一个div

6 个答案: