如何使用Jquery提取具有特定ID的div值？

Question

我有带有添加按钮的数据列表。在按钮上单击如何使用jquery获取id为“ rnumber”的div的值。我不知道如何获得这个数字，但是每次我获得列表的第一个数字时，我都想要同一个班级的数字。例如如果我单击第二李按钮，我仍然得到第一李类div值。我尝试与父母和孩子的选择者，但我不明白。

<div class="modal-body">
    <ul class="searchresult" style="list-style-type: none;">
        <li>
            <div  class="kt-font-lg">AKash</div>
            <div  class="kt-font-lg " id="rnumber">1234567890</div>
            <button  class="kt-font-lg btn-primary " onclick="addNumber()">Add</button>
        </li>
        <li>
            <div  class="kt-font-lg">Deep</div>
            <div  class="kt-font-lg " id="rnumber">9012345678</div>
            <button  class="kt-font-lg btn-primary " onclick="addNumber()">Add</button>
        </li>
    </ul>
</div>

onClick函数：

function addNumber(){
                rnumber = $('#rnumber');
                var  ttt = rnumber.text();
                console.log(ttt);        
             }

Answer 1

您必须保持ID唯一。重复ID是犯罪。改为将其更改为class。由于多个元素共享相同的功能，因此请使用event.target或this。您可以使用类似这样的内容：

function addNumber() {
  console.log($(event.target).prev().text());
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-body">
  <ul class="searchresult" style="list-style-type: none;">
    <li>
      <div class="kt-font-lg">AKash</div>
      <div class="kt-font-lg rnumber">1234567890</div>
      <button class="kt-font-lg btn-primary" onclick="addNumber()">Add</button>
    </li>
    <li>
      <div class="kt-font-lg">Deep</div>
      <div class="kt-font-lg rnumber">9012345678</div>
      <button class="kt-font-lg btn-primary" onclick="addNumber()">Add</button>
    </li>
  </ul>
</div>

以一种更好的方式，使用不引人注目的JavaScript事件处理：

$(function () {
  $(".btn-primary").click(function () {
    console.log($(this).prev().text());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-body">
  <ul class="searchresult" style="list-style-type: none;">
    <li>
      <div class="kt-font-lg">AKash</div>
      <div class="kt-font-lg rnumber">1234567890</div>
      <button class="kt-font-lg btn-primary">Add</button>
    </li>
    <li>
      <div class="kt-font-lg">Deep</div>
      <div class="kt-font-lg rnumber">9012345678</div>
      <button class="kt-font-lg btn-primary">Add</button>
    </li>
  </ul>
</div>

Answer 2

请注意，您在两个Id上使用相同的<div>属性值具有无效的HTML，我将其更改为class属性，这是使用.prev()方法的有效代码段，还请注意如何通过事件处理程序的元素：

function addNumber(el){
  const text = $(el).prev().text();
  console.log(text);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-body">
    <ul class="searchresult" style="list-style-type: none;">
        <li>
            <div  class="kt-font-lg">AKash</div>
            <div  class="kt-font-lg " class="rnumber">1234567890</div>
            <button  class="kt-font-lg btn-primary " onclick="addNumber(this)">Add</button>
        </li>
        <li>
            <div  class="kt-font-lg">Deep</div>
            <div  class="kt-font-lg " class="rnumber">9012345678</div>
            <button  class="kt-font-lg btn-primary " onclick="addNumber(this)">Add</button>
        </li>
    </ul>
</div>