在公共'root'使用jQuery

Select another div within a common 'root' using jQuery

本文关键字：使用 jQuery root      更新时间：2023-09-26

我有这样的结构：

<div class="root">
    <div class="image">
        <div class="price">$100</div>
    </div>
    <div class="productinfo">
        <div class="title" id="title1">Banana</div>
    </div>
</div>
<div class="root">
    <div class="image">
        <div class="price">$14</div>
    </div>
    <div class="productinfo">
        <div class="title" id="title2">Spoon</div>
    </div>
</div>

现在，我需要知道具有$100内容的类price的div的宽度，而不是最终得到div $14的宽度但代码需要从$("#title1")开始。我该怎么做？或者，我应该如何选择元素的父元素，然后选择具有该父元素特定类的子元素？谢谢

您可以使用函数closest()进行以下操作：

$("#title1").closest('.root').find('.price').text();

演示

第二种可能性是使用parents()-函数：

$("#title1").parents('.root').find('.price').text();

演示2

参考

closest（）

parents（）

如果您不知道"公共"父类，可以使用一种更通用的方法：

$("#title1").closest(":has(.price)").find(".price")

示例：

$(function() {
  $(".title").click(function() {
    $(this).closest(":has(.price)").find(".price").hide().fadeIn("slow");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Click on labels to highlight corresponding price</p>
<div>
  <div class="image">
    <div class="price">$100</div>
  </div>
  <div class="productinfo">
    <div class="title" id="title1">Banana</div>
  </div>
</div>
<div>
  <div class="image">
    <div class="price">$14</div>
  </div>
  <div class="productinfo">
    <div class="title" id="title2">Spoon</div>
  </div>
</div>

您还可以使用html() 获取值

像这样：

var price = $("#title1").closest('.root').find('.price').html();
alert(price);
相关文章：