獲取父Div，然后獲取其中的元素

Question

我有一些html（請注意，此HTML塊在數據內部不斷變化的情況下重復出現）：

            <div class="memberDiv" style="position:relative">
                <p class="myUserName"><strong>Jo Bloggs</strong></p>
                <p class="myJobTitle">Widget Maker</p>
                <p class="myCountry">England</p>
                <button class="memberMore">MORE INFORMATION</button>
            </div>

我想在Java中執行的操作是從div內部獲取實際值（例如，Jo Bloggs，Widget Maker，England）

我認為這是可行的：

$(".memberMore ").click(function (e) {
    e.preventDefault();
    //Get the 'parent' div (memberDiv)
    var myDiv = $(this).closest("div");
    alert($(myDiv).next(".myUserName").text());
    return false;
});

但是警報框顯示“未定義”錯誤。

誰能給我5分鍾，讓我看看我的做法是否錯誤？

謝謝，克雷格

Answer 1

使用find（）代替

 $(".memberMore ").click(function(e) { e.preventDefault(); //Get the 'parent' div (memberDiv) var myDiv = $(this).closest("div"); console.log($(myDiv).find(".myUserName").text()); return false; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <div class="memberDiv" style="position:relative"> <p class="myUserName"><strong>Jo Bloggs</strong> </p> <p class="myJobTitle">Widget Maker</p> <p class="myCountry">England</p> <button class="memberMore">MORE INFORMATION</button> 

Answer 2

Try this
$(".memberMore ").click(function (e) {
    e.preventDefault();        
    alert($(this).find(".myUserName").text());
    return false;
});

Answer 3

您應該使用“兄弟姐妹”功能，而不是“查找”功能，如下所示：

$(".memberMore ").click(function (e) {
    e.preventDefault();        
    alert($(this).siblings(".myUserName").text());
    return false;
});

在這里擺弄

Answer 4

要返回該div中的所有段落，請遍歷它們：

 $(".memberMore ").click(function(e) { e.preventDefault(); //Get the 'parent' div (memberDiv) var myDiv = $(this).closest("div"); var txtReturn = ''; myDiv.find('p').each(function(index) { if (index>0) { txtReturn += ', ' } txtReturn += $(this).text() }); alert(txtReturn); return false; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="memberDiv" style="position:relative"> <p class="myUserName"><strong>Jo Bloggs</strong></p> <p class="myJobTitle">Widget Maker</p> <p class="myCountry">England</p> <button class="memberMore">MORE INFORMATION</button> </div> 

或者，您可以通過將按鈕移出div，和/或將其更改為input type="button" （這樣它就沒有內部文本）來使操作稍微容易一些。

 $(".memberMore").click(function(e) { e.preventDefault(); //Get the 'parent' div (memberDiv) var myDiv = $(this).prev("div"); alert(myDiv.text()); return false; }); $(".memberMore2").click(function(e) { e.preventDefault(); //Get the 'parent' div (memberDiv) var myDiv = $(this).closest("div"); alert(myDiv.text()); return false; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="memberDiv" style="position:relative"> <p class="myUserName"><strong>Jo Bloggs</strong></p> <p class="myJobTitle">Widget Maker</p> <p class="myCountry">England</p> <input type="button" class="memberMore2" value="MORE INFORMATION" /> </div> <button class="memberMore">MORE INFORMATION</button> 

Answer 5

您還可以使用siblings()函數獲取所有元素的文本。 如果您需要獲取字符串

Jo Bloggs, Widget Maker, England

您可以這樣做：

 $('.memberMore').on('click', function() { var text = $(this).siblings().map(function() { return $(this).text(); }).get().join(', '); alert(text); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="memberDiv" style="position:relative"> <p class="myUserName"><strong>Jo Bloggs</strong></p> <p class="myJobTitle">Widget Maker</p> <p class="myCountry">England</p> <button class="memberMore">MORE INFORMATION</button> </div> 

Answer 6

如果要顯示所有p的文本，可以嘗試如下操作：

$(".memberMore ").click(function(e) {
  e.preventDefault();

  $(this).parent().find('p').each(function(index, elemt){
     console.log($(elemt).text());
  });

  return false;
});  

這里的關鍵是parent（）方法。