单击父级时如何获取子级名称

Question

I have many search result like this:

<div id="product-button">
    <p id="product-id">id</p>
    <p id="product-name">name</p>
</div>
<div id="product-button">
    <p id="product-id">id</p>
    <p id="product-name">name</p>
</div>

etc etc

I need to get the text of the name and id of product that I click

my shut but print <empty string> in the console:`

$(document).on('click', '#product-button', function(){

  console.log($(this).closest('#product-button').children('#product-name').text());

});

Answer 1

The id of an element has to be unique. Replace them with classes.

<div class="product-button">
    <p class="product-id">id_1</p>
    <p class="product-name">name_1</p>
</div>
<div class="product-button">
    <p class="product-id">id_2</p>
    <p class="product-name">name_2</p>
</div>

$(this) is ('#product-button') so no need for it:

$(document).on('click', '.product-button', function(){

  console.log($(this).children('.product-name').text());

});

 $(document).on('click', '.product-button', function(){ console.log(`${$(this).children('.product-name').text()} ${$(this).children('.product-id').text()}`); });

 <div class="product-button"> <p class="product-id">id_1</p> <p class="product-name">name_1</p> </div> <div class="product-button"> <p class="product-id">id_2</p> <p class="product-name">name_2</p> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>