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

Question

我有带有添加按钮的数据列表。在按钮上单击如何使用 id="rnumber" 和 jquery 获取 div 的值。我想要按钮单击上的数字。我不知道如何获得我尝试的那个数字，但每次我获得列表的第一个数字时，我都想要相同的数字 class 。前任。如果我点击第二个 li 按钮，我仍然得到第一个 li class div 值。我尝试使用 parents 和 child 选择器，但我没有得到答案。

<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>

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

请注意，通过在两个 <div> 上使用相同的 Id 属性值，您 无效 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>

Answer 3

$(".click-number").click(function(){
  var rnumber = $(this).data('rnumber');
  console.log(rnumber);
});

<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 ">1234567890</div>
 <button  class="kt-font-lg btn-primary click-number" data-rnumber="1234567890">Add</button>
        </li>
        <li>
            <div  class="kt-font-lg">Deep</div>
            <div  class="kt-font-lg ">9012345678</div>
 <button  class="kt-font-lg btn-primary click-number" data-rnumber="9012345678">Add</button>
        </li>
    </ul>
</div>

您不能为两个 div 元素设置相同的 ID class 点击数字是最简单的方法。将数字作为data-rnumber并在jquery.

中获取

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

How to fetch div value with specific id using Jquery?

javascript

jquery

jquery-selectors

parent-child

parent-selector