Clever Geek Handbook

Finding child div classes

ive tried to do some research but i can't find a specific answer for this.

I have the following HTML

<div class="collapsingHeader">
    <div class="listItemWrapper">
        <div class="itemWrapper">
            <div class="itemImage"></div>
            <div class="itemLabel"></div>
        </div>
        <div class="itemWrapper">
            <div class="itemImage"></div>
            <div class="itemLabel"></div>
        </div>
    </div>
 </div>
<div class="collapsingHeader">
    <div class="listItemWrapper">        
        <div class="itemWrapper">
            <div class="itemImage"></div>
            <div class="itemLabel"></div>
        </div>
        <div class="itemWrapper">
            <div class="itemImage"></div>
            <div class="itemLabel"></div>
        </div>
    </div>
 </div>

Now, as you can see, I have 2 collapsingHeaders

, each with listItemWrapper

that contains 2 itemWrapper

, each containing an image and a label.

I am using javascript to press the "collapsingHeader" key to hide the .next element (which is the container listItemWrapper

below).

The problem I'm having here is that there is a little bad animation when itemImage

shrinking / hiding with the container. So I look further when the container is listItemWrapper

toggling to show / hide to additionally target the 2 child classes itemImage

and set them display:none

.

So my thinking was something like when the use clicks on the collapsingHeader

class ..

$(this).next().children('.itemImage')

and then update the css / class of each. But the above code does not work as expected and I think Im not using it correctly.

any ideas on how to target specific children (depth) in a div container?

Thank!

+3


source to share


2 answers


use below code. you don't need to use next () to find children. use find ()



$(this).find('.itemImage').hide();  

 or 

$(this).children('.itemImage').hide();
+3


source


Using jQuery find()

, you can find any element (based on type, class or id) in an element $(this)

:

Just change:

$(this).next().children('.itemImage')


in

$(this).find('.itemImage').hide()
+4


source






More articles:


All Articles