jQuery：點擊選擇上一個/最近的div與選擇器

我已經坐了一段時間，試圖解決一個問題，我敢肯定很簡單，但它不能讓它工作。jQuery：點擊選擇上一個/最近的div與選擇器

我得到這個HTML：

<div class="span4"> 
    <div id="content" class="col-1"></div> 
    <div class="add"> 
    <div class="dropdown btn-group"> 
     <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> 
      Add element 
      <span class="caret"></span> 
     </a> 
     <ul class="dropdown-menu" id="addToColumn" data-col="1"> 
      <li><a href="#" id="headline">Headline</a></li> 
      <li><a href="#" id="file">File</a></li> 
      <li><a href="#" id="linebreak">Linebreak</a></li> 
     </ul> 
    </div> 
    </div> 
</div>

此纏繞其再次包裹另一個DIV（類=容器）內一個div（類=行）的內部。

現在，當我按三個鏈接（標題，文件或Linebreak）中的任何一個時，我有一些JS做一些Ajax，然後在空格div content中插入一些內容。

但是對於我的生活，我只是不能選擇div。

我應該說，代碼塊重複了三次，所以我有三列，每列包含相同的三個鏈接相同的下拉菜單，我想使它儘可能靈活（在我使用一些不同的數據之前 - ？屬性，但如果可能的話，我想盡量少用）。

我的JS代碼看起來像現在這種權利：

$("#addToColumn li a").click(function() { 
    var elementType = $(this).attr('id'); 

// I’ve tried this but with no luck: 
var col = $(this).closest("div#content"); 
    // AND 
    var col = $(this).prev("div#content"); 
}

有一些東西，混淆了我這個DOM樹。我想要每個下拉菜單在正確的列右側的wrapper-div中插入一些內容，我想嘗試在不使用某些數字「ID」的情況下執行此操作，但只需選擇「最接近的」內容 div;在這裏插入數據。

我該如何去做呢？

如果非常讚賞

-Cheers

來源

2013-07-02 Mestika

任何幫助，您只能爲id="content" 1元。有多個是無效的，可能會導致意外的行爲。其餘的代碼似乎是正確的。如果您將id更改爲class，則以下內容應起作用：var col = $(this).parents(".row").find(".content");。 id="addToColumn",id的意思是唯一的 - 使用類來代替。

來源

2013-07-02 16:03:28

除非OP只有一個DIV id爲「內容」。然後，他可以簡單地使用'jQuery（'＃content'）'或'jQuery（document.getElementById（'content'））' – andlrc

他明確指出「代碼塊重複三次」+代碼是否則正確。 –

好點.........！ – andlrc

我想你可以嘗試

var col = $(this).closest("div.add").prev();

來源

2013-07-02 16:11:22 VinhBS

由於#content不是a和.prev()的父母只爲兄弟姐妹，你需要得到誰是#content像兄弟最接近父：

$(this).closest(".add").prev();

來源

2013-07-02 16:11:56

您可以使用jquery中的parents（）函數，然後向下遍歷。雖然Yotam更爲正確，但ID應該是唯一的。

篩選小提琴：http://jsfiddle.net/WHSpU/

$(this).parents(".row").find("#content").first().append('some stuff');

來源

2013-07-02 16:12:51 grossadamm

HTML

<div class="span4"> 
     <div class="content"></div> 
     <div class="add"> 
     <div class="dropdown btn-group"> 
      <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> 
       Add element 
       <span class="caret"></span> 
      </a> 
      <ul class="dropdown-menu addToColumn" data-col="1"> 
       <li><a href="#" class="headline">Headline</a></li> 
       <li><a href="#" class="file">File</a></li> 
       <li><a href="#" class="linebreak">Linebreak</a></li> 
      </ul> 
     </div> 
     </div> 
    </div> 
    <div class="span4"> 
     <div class="content"></div> 
     <div class="add"> 
     <div class="dropdown btn-group"> 
      <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> 
       Add element 
       <span class="caret"></span> 
      </a> 
      <ul class="dropdown-menu addToColumn" data-col="2"> 
       <li><a href="#" class="headline">Headline</a></li> 
       <li><a href="#" class="file">File</a></li> 
       <li><a href="#" class="linebreak">Linebreak</a></li> 
      </ul> 
     </div> 
     </div> 
    </div> 
    <div class="span4"> 
     <div class="content"></div> 
     <div class="add"> 
     <div class="dropdown btn-group"> 
      <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> 
       Add element 
       <span class="caret"></span> 
      </a> 
      <ul class="dropdown-menu addToColumn" data-col="3"> 
       <li><a href="#" class="headline">Headline</a></li> 
       <li><a href="#" class="file">File</a></li> 
       <li><a href="#" class="linebreak">Linebreak</a></li> 
      </ul> 
     </div> 
     </div> 
    </div>

的Javascript

$(".addToColumn li a").on('click', function(e) { 
     e.preventDefault(); 
     var myContentDiv = $(this).closest('.content'); 
     myContentDiv.load(myData); 
    }

來源

2013-07-02 16:19:45 DevlshOne

jQuery：點擊選擇上一個/最近的div與選擇器

回答

相關問題