Search code examples
jqueryjquery-selectorssiblings

jQuery to find nearest Div of Parent

I am trying to learn jQuery with the following scenario. For this, I tried the following jQuery after reading multiple SO questions; but it did not work

$(this).closest('.viewLogText').parent().find('.reportLog').css("display", "none");

Scenario:

There are three child div elements in a div that has Css class “repeaterRecord”. The child divs are with css classes - repeaterIdentifier, viewLogTitle and reportLog.

There are two divs with this structure (div that has Css class “repeaterRecord”).

enter image description here

The div with viewLog class is as shown below.

   <div class="viewLogTitle">
        <div class="viewLogText">
            View Report Log
        </div>
        <div>
            <img alt="Expand" src="Images/PlusIcon.GIF" class="expandLogIcon" />
            <img alt="Collapse" src="Images/MinusIcon.GIF" class="collapseLogIcon" />
        </div>
    </div>

When the collapseLogIcon image is clicked, I need to hide (only) the nearest div with “reportLog” class (at the same level of "viewLogTitle"). How can we do it using jQuery?

Updated Working Example:

http://jsfiddle.net/Lijo/L9w4F/11/ and http://jsfiddle.net/Lijo/L9w4F/8/ and http://jsfiddle.net/Lijo/L9w4F/12/

REFERENCE:

  1. Efficient, concise way to find next matching sibling?

  2. jquery select siblings 'until'

Solution

  • You can use siblings() method:

    $(this).closest('.viewLogText').siblings('.reportLog').hide()

    You can also try the hide() method which is same as .css("display", "none");