拿到單擊元素的DIV父元素，爲了得到在同一div的p系列

Question

我有一個div，看起來像這樣：

<td id="monday"> 
<p class="outter">whatever here</p> 
<p class="hidden" style="display:none">Some content I want to get</p> 
</td> 

現在的問題是 - TD ID將改變（這只是其中的一個）。

所以我想要做的是，當用戶點擊.outter（它總是會被稱爲outter），我想要找到td id，然後才能訪問p class （這將永遠是'隱藏'）。

所以我想這（document.body的是避開一個動態加載的問題，我有）：

$(document.body).on('click', '.outter', function() { 
     var info = $(this).parent("td").$(".hidden").text(); 
     $("#rightBox").css("width", "200px"); 
     $("#rightBox").css("background", "#f0f0f0"); 
     $("#rightBox").empty(); 
     $("#rightBox").append(info); 
    }); 

我遇到的問題是在第一行，得到的變量。 我想說這個特定的.outter類，找到它的父類，然後在其中找到隱藏的類。然後獲取隱藏課程中的文本。然後採取該變量並將其轉儲到#rightBox;

任何人都可以幫忙嗎？

Answer 1

線var info = $(this).parent("td").$(".hidden").text();拋出一個錯誤，你應該使用find或children方法，作爲目標元素是點擊的元素的下一個直接的兄弟姐妹，你可以使用next方法，你不需要父元素的ID 。

$(document.body).on('click', '.outter', function() { 
    // var info = $(this).closest('td').find('.hidden').text(); 
    var info = $(this).next('.hidden').text(); 
    $("#rightBox").css({"width": "200px", "background": "#f0f0f0"}) 
        .html(info); 
}); 

需要注意的是，你還可以創建一個類，並使用addClass方法而不是css方法，這使得你的代碼乾淨了一點。

Answer 2

你可以這樣做：

$(document.body).on('click', '.outter', function() { 
    var info = $(this).next().text(); 
    $("#rightBox").css("width", "200px"); 
    $("#rightBox").css("background", "#f0f0f0"); 
    $("#rightBox").empty(); 
    $("#rightBox").append(info); 
}); 

演示：http://jsfiddle.net/eMzcx/