jQuery的通過

類

選擇下一格，我有以下HTML：jQuery的通過

<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）

來源

2011-11-21 krsunny

由於您使用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()選擇器的類將比使用.has()進行過濾要快得多。

來源

2011-11-21 09:29:44 gnarf

我結束了只是分配行id然後直接訪問它們。我知道這個html很奇怪，但它必須是這個對於一些Ajax的東西，即時通訊 – krsunny

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

來源

2011-11-21 07:44:44 ComfortablyNumb

你試圖做：

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

來源

2011-11-21 07:46:06

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

來源

2011-11-21 07:51:50 jerjer

多達這也適用 - ['。首先（）']（http://api.jquery.com/first）實際上是一個小更快......連更快['.eq（0）']（http://api.jquery.com/eq），但是 - 這三個中的任何一個！ – gnarf

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

，讓您有div class="row"

將這個地方來測試，增加了一些額外的類到每個noteDetails類的，看是否是正確的選擇

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

這應該只打印您所需的DIV，沒有其他的類名。

因此要測試，請將類first添加到第一個noteDetails div並將類second添加到下一個等等。

它應該顯示twelveCol noteDetails first作爲輸出。

來源

2011-11-21 07:52:40 Arindam

試試這個：

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

來源

2015-02-19 14:28:27 tasmaniski

jQuery的通過

回答

相關問題