Выбрать другой DIV внутри общего «корня» с помощью JQuery

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> 

Теперь мне нужно знать ширину DIV с классом price, который имеет содержание $100 и не в конечном итоге получение ширины div $14; , но код необходимо начинать с $("#title1"). Как я должен это делать? Или, как я должен выбрать родительский элемент, а затем выбрать дочерний элемент с определенным классом этого родителя? Благодаря!

Answer 1

Вот более общий способ, который можно было бы использовать, если вы не знаете, "общий" родительский класс:

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

Answer 2

Вы можете использовать функцию closest() для этого:

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

Demo

Вторая возможность является использование parents() -функции:

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

Demo 2

Ссылка

.closest()

.parents()

Answer 3

Также вы можете получить значение с помощью html()

Как это:

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