Question

我有这种结构：

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

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

Answer 1

您可以使用函数closest()：

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

Demo

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

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

Demo 2

<强>参考

.closest()

.parents()

Answer 2

这是一种更通用的方法，如果你不知道＆＃34;常见的＆＃34;父类：

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

示例：

＆＃13;

$(function() {
  $(".title").click(function() {
    $(this).closest(":has(.price)").find(".price").hide().fadeIn("slow");
  });
});

＆＃13;

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

＆＃13;

Answer 3

您也可以使用html()

获取值

像这样：

var price = $("#title1").closest('.root').find('.price').html();
alert(price);

在公共根目录中选择另一个div＆＃39;使用jQuery

3 个答案: