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

Posted 2023-03-14

【中文标题】如何使用 jQuery 在多个 div 中创建查询选择器？

【英文标题】：How to make query selector troughout multiple divs with jQuery?

【发布时间】：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']" >
                                </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。

【参考方案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"]

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

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