我有一个带有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');
我怎么能那样做？
您不理解css-selectorparent>child是如何工作的，事实是这个选择器只获得父元素的直接子元素。实际上，它意味着不直接是指定父项的子项的元素不会被选中。
例如：
null
#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>