How to affect an ancestor in jQuery that has a certain descendant?

Question

I've got these two DIVs which have the same class name ():

---

    <div class="myOutterDiv">
        <ul class="innerUL">
            <li id="num1">1</li>
            <li id="num2">2</li>
        </ul>
    </div>

    <div class="myOutterDiv">
        <ul class="innerUL2">
            <li id="letterA">A</li>
            <li id="letterB">B</li>
        </ul>
    </div>

---

I'd like to apply a css border with a blue color to the one that contains 2 and red to the one that contains B.

I've tried using parentsUntil(), but applied a border to all the ancestors up to class="myOutterDiv". I just want to affect class="myOutterDiv".

Thanks!

Answer 1

Would this work for you?

$('#num2').parent('.myOuterDiv').css({'border': '1px solid blue'});
$('#letterB').parent('.myOuterDiv').css({'border': '1px solid red'});