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

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:

score 5 · Answer 1 · answered Aug 08 '12 at 10:03

5

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

API HERE

answered Aug 08 '12 at 10:03

Andrea Turri

6,480
7
37
63

score 2 · Answer 2 · answered Aug 08 '12 at 10:04

2

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:

answered Aug 08 '12 at 10:04

David Thomas

249,100
51
377
410

The filtering selector in `next` is not needed with a single element – Esailija Aug 08 '12 at 10:06
That's true, so far as it goes; but the intent of passing the filter was to account for those times when the next sibling might *not* be the desired target. Though, in fairness, I should have explained that intent. **edited** – David Thomas Aug 08 '12 at 10:07
1

If it might not be that, then `next` is not appropriate :P – Esailija Aug 08 '12 at 10:08
Hence the subsequent suggestions. =) – David Thomas Aug 08 '12 at 10:09
1

Yeah, the only reason I am even commenting is that any time I have seen `next` used with a filter, it has been because the author has misunderstood `next`. `next(filter)` intuitively looks like it's gonna find the next element that matches `filter`, but instead it simply takes the next element sibling and returns it IF it matches the filter, otherwise returning nothing. – Esailija Aug 08 '12 at 10:11
2

Agreed; and you were right to comment, my explanation was an absolutely glaring omission. =) – David Thomas Aug 08 '12 at 10:12

score 1 · Accepted Answer · answered Aug 08 '12 at 10:04

1

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

answered Aug 08 '12 at 10:04

Ram

143,282
16
168
197

jQuery to find nearest Div of Parent

3 Answers3

Linked