Geek Answers Handbook

JQuery to find the nearest Div of Parent

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

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

Scenario:

There are three div children in a div that have the "repeataterRecord" CSS class. The child divs use the css classes - repeataterIdentifier, viewLogTitle and reportLog.

There are two divs in this structure (a div that has the "repaterRecord" Css class).

enter image description here

The div class with the viewLog class is 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 I click on the collapseLogIcon image, I need to hide (only) the closest div with the class "reportLog" (at the same level as "viewLogTitle"). How can we do this with 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 :

+4
source share
3 answers

You can use the siblings() method:

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

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

+1
source

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

API HERE

+5
source

I would 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 will only be affected if it matches this selector. If the next brother .viewLogTitle will always be the target (HTML will not change), then the filter is not needed and can be omitted.

Or, if they do not always follow sequentially (but the “closest” should always be affected), for the following siblings:

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

Or for previous siblings (if .reportLog preceded by .viewLogTitle ):

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

Literature:

+2
source

More articles:


All Articles