jQuery to find nearest Div of Parent

Question

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”).

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'

Answer 1

I'd suggest using:

$(this).closest('.viewLogTitle').next('.reportLog').hide();

Note that the filter passed to the next() method ('.reportLog') means that the next sibling element of the viewLogTitle element will be affected only if it matches that selector. If the next-sibling of the .viewLogTitle will always be the target (the HTML isn't going to change), then the filter is unnecessary and may be omitted.

Or, if they don't always follow consecutively (but the 'nearest' is always the one to be affected), for following siblings:

$(this).closest('.viewLogTitle').nextAll('.reportLog:first').hide();

Or for preceding siblings (if the .reportLog precedes the .viewLogTitle):

$(this).closest('.viewLogTitle').prevAll('.reportLog:first').hide();

References:

• :first selector.
• next().
• nextAll().
• prevAll().

Answer 2

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");

Answer 3

You can use .siblings() to find the nearest div.

API HERE