Получить родительский 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> 

И то, что я пытаюсь сделать в Яве получить фактические значения внутри DIV (т.е. Джо Bloggs, Widget Maker, Англия)

Это то, что я думал, что будет работать:

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

Но окно предупреждения показывает на «неопределенное» ошибку.

Может ли кто-нибудь оставить мне 5 минут, чтобы показать мне ошибку моих путей, пожалуйста?

спасибо, Craig

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; 
}); 

Fiddle here

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().