CODEWITHSUNDEEP
javascriptjquery
Salix
Salix

Reputation: 85

How to get a previous DIV with jQuery

I want to animate an element (.item-i) after I click on another element(.item-1) which is following below. Now I don't know, how to get to this element.

I want only the exact above element animated, not both above, only the first element above.

I made an easy show up in http://jsfiddle.net/Eef4v/1/. The YellowBG is the "animation".

Here is my JS code: 

$('.item-1').click(function() {
    $(this).closest('.item-i').css( "background", "yellow" );
});

And my HTML Markup:

<ul id="one" class="level-1">
    <li class="item-i">I</li>
    <li class="item-ii">II
        <ul class="level-2">
            <li class="item-a">A</li>
            <li class="item-b">B
            <ul class="level-3">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
            </li>
            <li class="item-c">C</li>
        </ul>
    </li>
    <li class="item-iii">III</li>
</ul>
<ul id="Ul1" class="level-1">
    <li class="item-i">I</li>
    <li class="item-ii">II
        <ul class="level-2">
            <li class="item-a">A</li>
            <li class="item-b">B
            <ul class="level-3">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
            </li>
            <li class="item-c">C</li>
        </ul>
    </li>
    <li class="item-iii">III</li>
</ul>

Upvotes: 2

Views: 71

Answers (2)

Steve
Steve

Reputation: 547

Two ways to get .item-i to highlight.

$(this).parents('.level-1').find('.item-i').css( "background", "yellow" );

but if you have multiple .item-i classes under your .level-1 then they would all turn yellow.

Working Demo

You could also write a find algorithm that goes through each parent of .item-1 and finds the closest item-i

$('.item-1').click(function () {
    $(this).parents().each(function(index,elem){
        var query = $(elem).find('.item-i');
        if(query.length > 0)
        {
            query.first().css("background-color", "yellow");
            return false;
        }
    });
});

Working Algorithm demo

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82231

Use:

$(this).closest('.item-ii').prev().css( "background", "yellow" );

Working Demo

For Toggling background color:

$(this).closest('.item-ii').prev().toggleClass("highlight");

CSS: 

.highlight {background: yellow;}

Demo with ToggleClass

Upvotes: 2

Related Questions