html - 如何使用 jQuery 在多个 div 中创建查询选择器？

Question

我有一个带有 id="overlay-templates" 的 div我想使用 jQuery 进行查询，将类添加到单击的 <li>使用数据模板:
这是我的代码:

<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-selector是如何工作的parent > child ，事实是这个选择器只获得父元素的直接子元素。
实际上，这意味着不直接选择指定父项的子元素的元素。
例如

#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>

对于您的情况，您需要将选择器从 #overlay-templates > li[data-template="1"] 更改为至 #overlay-templates ul > li[data-template="1"]如果你想绑定(bind) li[data-template]的所有点击事件你只需要那样做

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