Как получить ребенка от родительского сНу элемента

Question

Если у меня есть DOM структуры, как следующее:

$(function() { 
 
    $(".child-a").click(function() { 
 
    // change `.child-b` to green 
 
    
 
    // I can go higher into the chain 
 
    $(this).parents(".parent").css({ 
 
     "background-color": "black" 
 
    }); 
 
    
 
    // I can use css to get `.child-b` to blue 
 
    $(".parent .sub-parent-b .child-b").css({ 
 
     "background-color": "blue" 
 
    }); 
 
    }); 
 
});

div div div { 
 
    width: 100px; 
 
    height:100px; 
 
    background-color: red; 
 
    border:1px black dashed; 
 
} 
 

 
.child-a { 
 
    margin-bottom: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent"> 
 
    <div class="sub-parent-a"> 
 
    <div class="child-a"></div> 
 
    </div> 
 
    <div class="sub-parent-b"> 
 
    <div class="child-b"></div> 
 
    </div> 
 
</div>

я мог технически использовать обычный CSS, но это не является достаточно гибкой.

$(function() { 
 
    $(".child-a").click(function() { 
 
    // change `.child-b` to green 
 
    
 
    // I can go higher into the chain 
 
    $(this).parents(".parent").css({ 
 
     "background-color": "black" 
 
    }); 
 
    
 
    // I can use css to get `.child-b` to blue 
 
    $(".parent .sub-parent-b .child-b").css({ 
 
     "background-color": "blue" 
 
    }); 
 
    
 
    /* 
 
     In this case, my first aproach of using `parent` made sure that the change only apeared on that specific css, or in #a, but not on #b 
 
     
 
     While the use of css could only get me to change things in both #a and #b 
 
     
 
     So how could I manage to do something like: 
 
     
 
     #a .sub-parent-a .child-a is clicked, so only #a .sub-parent-b .child-b changes, and not #b .sub-parent-b .child-b. 
 
    */ 
 
    }); 
 
});

div div div { 
 
    width: 100px; 
 
    height:100px; 
 
    background-color: red; 
 
    border:1px black dashed; 
 
} 
 

 
.child-a { 
 
    margin-bottom: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent" id="a"> 
 
    <div class="sub-parent-a"> 
 
    <div class="child-a"></div> 
 
    </div> 
 
    <div class="sub-parent-b"> 
 
    <div class="child-b"></div> 
 
    </div> 
 
</div> 
 

 
<div class="parent" id="b"> 
 
    <div class="sub-parent-a"> 
 
    <div class="child-a"></div> 
 
    </div> 
 
    <div class="sub-parent-b"> 
 
    <div class="child-b"></div> 
 
    </div> 
 
</div>

В этом случае, мой первый Подход использования parent убедились, что изменение apeared только в этой конкретной CSS, или в #a, но не на #b

Хотя использование из css мог только заставить меня изменить вещи как в #a, так и #b

Так как же я мог управлять t o сделайте что-нибудь вроде:

#a .sub-parent-a .child-a щелкнул, поэтому только #a .sub-parent-b .child-b изменяется, а не #b .sub-parent-b .child-b.

Answer 1

Вы можете подняться по цепи, и вы также можете вернуться вниз по цепи. Таким образом, селекторы остаются в пределах этого «элемента».

$(function() { 
 
    $(".child-a").click(function() { 
 
    // change `.child-b` to green 
 
    
 
    // I can go higher into the chain 
 
    $(this).parents(".parent").css({ 
 
     "background-color": "black" 
 
    }); 
 
    
 
    // I can use css to get `.child-b` to blue 
 
    $(this).parents(".parent").find('.child-b').css({ 
 
     "background-color": "blue" 
 
    }); 
 
    
 
    /* 
 
     In this case, my first aproach of using `parent` made sure that the change only apeared on that specific css, or in #a, but not on #b 
 
     
 
     While the use of css could only get me to change things in both #a and #b 
 
     
 
     So how could I manage to do something like: 
 
     
 
     #a .sub-parent-a .child-a is clicked, so only #a .sub-parent-b .child-b changes, and not #b .sub-parent-b .child-b. 
 
    */ 
 
    }); 
 
});

div div div { 
 
    width: 100px; 
 
    height:100px; 
 
    background-color: red; 
 
    border:1px black dashed; 
 
} 
 

 
.child-a { 
 
    margin-bottom: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent" id="a"> 
 
    <div class="sub-parent-a"> 
 
    <div class="child-a"></div> 
 
    </div> 
 
    <div class="sub-parent-b"> 
 
    <div class="child-b"></div> 
 
    </div> 
 
</div> 
 

 
<div class="parent" id="b"> 
 
    <div class="sub-parent-a"> 
 
    <div class="child-a"></div> 
 
    </div> 
 
    <div class="sub-parent-b"> 
 
    <div class="child-b"></div> 
 
    </div> 
 
</div>

Answer 2

ИМО у вас есть путь к большому JQuery и не использует какие-либо власть УСС.

$(function() { 
 
    $(".child").click(function() { 
 
    // reset 
 
    $('.parents .selected').removeClass('selected'); 
 

 
    var $child = $(this); 
 
    var $subParent = $(this).closest('.sub-parent'); 
 

 
    $child.addClass('selected'); 
 
    $subParent.addClass('selected'); 
 
    }); 
 
});

div{ 
 
    padding: 5px; 
 
} 
 

 
.sub-parent.selected { 
 
    background-color: red; 
 
} 
 
.child{ 
 
    cursor: pointer; 
 
} 
 
.child.selected { 
 
    background-color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parents">Parents 
 
    <div class="parent">- Parent 
 
    <div class="sub-parent">- - Sub Parent 
 
     <div class="child">- - - Child</div> 
 
    </div> 
 
    <div class="sub-parent">- - Sub Parent 
 
     <div class="child">- - - Child</div> 
 
    </div> 
 
    </div> 
 
    <div class="parent">- Sub Parent 
 
    <div class="sub-parent">- - Sub Parent 
 
     <div class="child">- - - Child</div> 
 
    </div> 
 
    <div class="sub-parent">- - Sub Parent 
 
     <div class="child">- - - Child</div> 
 
    </div> 
 
    </div> 
 
</div>