如何使用jQuery使查询选择器剔除多个div？

Question

我有一个带有id=“overlay-templates”的div,我想用jQuery进行查询,将类添加到带有data-template的单击的

中：

这是我的代码：

<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--}}
....
                    

这段jQuery代码对我不起作用：

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

我怎么能那样做？

Answer 1

您不理解css-selectorparent>child是如何工作的，事实是这个选择器只获得父元素的直接子元素。实际上，它意味着不直接是指定父项的子项的元素不会被选中。

例如：

null

#parent-block > .child {color:red;}

html prettyprint-override"><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>