如何获取父div元素

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

所以我怎么能管理吨o做类似的事情：

#a .sub-parent-a .child-a被点击，所以只有#a .sub-parent-b .child-b更改，而不是#b .sub-parent-b .child-b。

Answer 1

你可以上链，也可以沿着链条往回走。这样选择器就停留在“this”元素中。

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

IMO你有办法不多jQuery和没有使用任何CSS的力量。

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