부모 클래스와 해당 하위 항목을 찾는 방법

Question

아래 구조와 비슷한 구조의 요소가 있습니다.

<div class="Order_Wrapper"> 
    <div class="Order_left"> 
     <div class="Order_Subtotal"> 
      <span class="Order_Coupon"> (-)$ 
       <span class="Coupon_Amount">30.00</span> 
      </span> 
     </div> 
    </div> 
<div> 

어떻게 부모, 자식 선택자를 사용하여 Coupon_Amount 요소의 값을 가져올 수 있습니까?

나는 시도했다 :

$('.Order_Coupon').children(".Order_Coupon").html() 

또한 :

$(this).closest('.Order_Wrapper').children('.Order_Coupon').html() 

그리고 :

$(this).parents('.Order_Subtotal').children('.Coupon_Amount').html() 

Answer 1

당신이 당신의 설명과 같이 계층 구조를 가지고 가정 할 경우, 예를 들어, Order_Coupon 요소가 선택되어 있으면 .children 메소드로 쿠폰 금액을 얻을 수 있습니다.

var amount=$('.Order_Coupon').children().html(); 

선택한 항목에 따라 couch_amount 요소를 찾으려면 .child를 여러 번 사용해야 할 수도 있습니다. 이러한 각 요소는 ID 또는 클래스가있는 경우

var amount=$('.Order_Left').children().children().children().html(); 

그러나, 그것은 .find 방법을 사용하고 셀렉터를 지정하는 것이 훨씬 안전합니다. 또한 하나의 하위 계층보다 더 많은 검색을 찾습니다.

var amount=$('.Order_Left').find('.Coupon_Amount').html(); 

이렇게하면 올바른 요소 값을 얻을 수 있습니다. 선택기를 지정하지 않고 .children을 호출 한 div 중 하나 이상의 자식 요소가있는 경우 매우 잘못된 결과가 발생할 수 있습니다.