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

【问题标题】：How to make query selector troughout multiple divs with jQuery?如何使用 jQuery 在多个 div 中创建查询选择器？
【发布时间】：2021-07-19 21:12:07
【问题描述】：

我有一个带有 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');

我该怎么做？

【问题讨论】：

嗨，从您的选择器中删除 > 看看是否可行。
你的 jquery 代码中是否有 .click() 处理程序？
您的 div 中有两个 id，即：id="nav-tabContent" id="overlay-templates" 删除 id="nav-tabContent" 并重试。
$('#overlay-templates').find('li[data-template]').on('click', e => { $(e.currentTarget).addClass('selected') })
工作正常检查this。

标签： html jquery laravel-blade

【解决方案1】：

你不明白 css-selector parent > child 是如何工作的，事实是这个选择器只获得父元素的直接子元素。实际上就是不直接选择父元素的子元素。

例如

#parent-block &gt; .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"]

如果你想绑定li[data-template] 的所有点击事件，你只需要这样做

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

【讨论】：