如何获取单击li时位于li内部的span的id

Question

 <li class="service">
                    <div class="name">>
                       <span class="price"></span>
                       Stock<span class="stock" id="ds"></span>
                    </div>
</li>
 <li class="service">
                    <div class="name">>
                       <span class="price"></span>
                       Stock<span class="stock" id="ju"></span>
                    </div>
</li>
 <li class="service">
                    <div class="name">>
                       <span class="price"></span>
                       Stock<span class="stock" id="zx"></span>
                    </div>
</li>

我想获取具有类名股票的跨度的 id，具体取决于单击的 li

$("li").click(function() {
        });

Answer 1

您必须使用 li 添加类选择器，这样它就不会添加所有 li。

试试这个：

$("li.service").click(function() {
      var spanid = $(this).find('span.stock').attr('id');
      alert(spanid);
});

Answer 2

可以在 click 事件处理程序中使用 this 关键字来引用单击的li。从那里，您可以使用find()检索所需的span，然后再调用prop()以获取 ID。试试这个：

$("li").click(function() {
  var id = $(this).find('.stock').prop('id');
  console.log(id);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="service">
    <div class="name">>
      <span class="price"></span> 
      Stock <span class="stock" id="ds"></span>
    </div>
  </li>
  <li class="service">
    <div class="name">>
      <span class="price"></span> 
      Stock <span class="stock" id="ju"></span>
    </div>
  </li>
  <li class="service">
    <div class="name">>
      <span class="price"></span>
      Stock <span class="stock" id="zx"></span>
    </div>
  </li>
</ul>

Answer 3

您可以使用find来获取具有股票类别的跨度。 使用 attr 获取属性。

$("li").click(function() {
  var id = $(this).find('.stock').attr('id');
  console.log(id);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="service">
    <div class="name">
      <span class="price"></span> Stock
      <span class="stock" id="ds"></span>
    </div>
  </li>
  <li class="service">
    <div class="name">
      <span class="price"></span> Stock
      <span class="stock" id="ju"></span>
    </div>
  </li>
  <li class="service">
    <div class="name">
      <span class="price"></span> Stock
      <span class="stock" id="zx"></span>
    </div>
  </li>
</ul>