使用jQuery影响UL认证

Question

我想让UL在边框上有红色，但是我失败了。

我不知道如何使用jQuery来做到这一点。

$(document).ready(function(){ 
 
    $("li.start").prev(".test").prev(".test2").prev(".test3").css({"color": "red", "border": "2px solid red"}); 
 
});

.siblings * { 
 
    display: block; 
 
    border: 2px solid lightgrey; 
 
    color: lightgrey; 
 
    padding: 5px; 
 
    margin: 15px; 
 
}

<div style="width:500px;" class="siblings"> 
 
    <ul class="test3">ul (parent) 
 
    <li class="test2">li (sibling)</li> 
 
    <li class="test">li (the previous sibling of li with class name "start")</li> 
 
    <li class="start">li (sibling with class name "start")</li> 
 
    <li>li (sibling)</li> 
 
    <li>li (sibling)</li> 
 
    </ul> 
 
</div>

谢谢！

Answer 1

ul是li.start元素的祖先元素，.prev()用于仅获取以前的兄弟元素 - 它不会找到祖先元素。

您可以使用.closest()或.parent()找到从li

$(document).ready(function() { 
 
    $("li.start").parent().css({ 
 
    "color": "red", 
 
    "border": "2px solid red" 
 
    }); 
 
    //or $("li.start").closest(".test3").css({"color": "red", "border": "2px solid red"}); 
 
});

.siblings * { 
 
    display: block; 
 
    border: 2px solid lightgrey; 
 
    color: lightgrey; 
 
    padding: 5px; 
 
    margin: 15px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div style="width:500px;" class="siblings"> 
 
    <ul class="test3">ul (parent) 
 
    <li class="test2">li (sibling)</li> 
 
    <li class="test">li (the previous sibling of li with class name "start")</li> 
 
    <li class="start">li (sibling with class name "start")</li> 
 
    <li>li (sibling)</li> 
 
    <li>li (sibling)</li> 
 
    </ul> 
 
</div>

Answer 2

的ul如何只此：

$(document).ready(function(){ 
    $("li.start").parent("ul").css({"color": "red", "border": "2px solid red"}); 
}); 

目标父ul的情况下直接使用兄弟姐妹。

Fiddle