How to make query selector troughout multiple divs with jQuery?

user_12256166 0
Viewed 40

I have a div with id="overlay-templates" and I want to make a query with jQuery that adds the class to the clicked <li> with the data-template :

This is my code :

<div class="tab-content" id="nav-tabContent" id="overlay-templates"> <!--this is my div-->
    {{-- tabpanel-1 --}}
    <div class="tab-pane fade active in" id="nav-test" role="tabpanel" aria-labelledby="nav-test-tab">
        
        {{-- overlays-layouts-container --}}
        <div class="overlays-layouts-container">
            <div class="overlays-layouts-content">

                <div class="overlays-custom-colors-header">
                    <div class="pull-left">
                        <p class="overlay-steps-p">Select a layout to customize from our overlay’s library</p>
                    </div>
                </div>
                
                <ul>
                    @foreach($overlayTemplates as $template)
                        @if($template->type == 1)

                            <!--here (li) where I want to add class named 'selected'-->
                                  <li 
                                    data-template="{{$template['id']}}"
                                    data-headercustomtext1 = "{{($template['header_text_1'] === 'dealer_phone') ? $phone : $template['header_text_1']}}"
                                    data-headercustomtext2 = "{{($template['header_text_2'] === 'dealer_website') ? $website : $template['header_text_2']}}"

                                    data-footercustomtext1 = "{{($template['footer_text_1'] === 'dealer_phone') ? $phone : $template['footer_text_1'] }}"
                                    data-footercustomtext2 = "{{($template['footer_text_2'] === 'dealer_website') ? $website : $template['footer_text_2']}}"

                                    data-footercustomtext3 = "{{$template['footer_text_3']}}"

                            > 
                                <div class="overlay-layouts-item">
                                    <img src="{{$template['thumbnails_path']}}" alt="">
                                </div>
                            </li>
                        @endif
                    @endforeach
                </ul>
            </div>
            
        </div>
        {{-- end overlays-layouts-container --}}
    </div>
    {{-- end-tabpanel 1--}}
....

this jQuery code doesn't work for me :

            $('#overlay-templates > li[data-template="1"]')
                .addClass('selected');

How can I do that ?

laravel-blade html jquery
1 Answers

You don't understand correct how is working css-selector parent > child, the fact is that this selector gets only direct child of parent element. Actually it means that Elements which are not directly a child of the specified parent, are not selected.

For example

#parent-block > .child {color:red;}
<div id="parent-block">
<div class="child">Direct child</div>
<div class="child">Direct child</div>
<div class="child">Direct child</div>
<div class="some-wrap">
<div class="child">indirect child</div>
<div class="child">indirect child</div>
<div class="child">indirect child</div>
</div>
</div>

For your case you need to change your selector from #overlay-templates > li[data-template="1"] to #overlay-templates ul > li[data-template="1"]

And if you want to bind all click events for li[data-template] you just need to do like that

$('#overlay-templates ul > li[data-template]').click(function(e) {
...
})
user_107545350
Related