代码之家 › 专栏 › 技术社区 › Chen Li Yong

使用jQuery在公共“根”中选择另一个div

css jquery javascript

Chen Li Yong · 技术社区 · 10 年前

我有这样的结构:

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

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

3 回复 | 直到 10 年前

empiric 10 年前

您可以使用函数 closest() 为此:

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

Demo

第二种可能性是使用 parents() -功能:

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

Demo 2

参考

.closest()

.parents()

Salman Arshad 10 年前

如果您不知道“通用”父类,可以使用以下更通用的方法:

$("#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>

Pranav Bilurkar 10 年前

此外,您可以使用 html()

这样地:

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

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

7 月前

Mass · 如何在Tailwind CSS v4中创建配置

7 月前

magenta placenta · 将css变量合并为一个变量

7 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

8 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

8 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

8 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

8 月前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

8 月前

Luckkks · 过渡色工作不正常

8 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

8 月前