将 css 在第二个 li 中更改为已知 ul class
[英]Change css in a second li for a known ul class
问题描述
我想突出显示所选 select 列表中的第二个li 元素，其中包含已知的 ul class “选择的结果”。
<div class="chosen-container chosen-container-single select-or-other-select form-select required chosen-processed" title="" id="edit_title_field_und_select_chosen">
<div class="chosen-drop">
<ul class="chosen-results">
<li class="active-result result-selected" data-option-array-index="0">- Select -</li>
<li class="active-result" data-option-array-index="1">select to create new title</li>
<li class="active-result" data-option-array-index="2">This</li>
<li class="active-result" data-option-array-index="3">That</li>
</ul>
</div>
</div>
How can I use jQuery to always select the second li element inside the ul class "chosen-results" and change the css to highlight it?
我已经尝试了很多事情，包括现在只是通过简单的$("ul.chosen-results:second li").css('background-color','yellow');
理想情况下，hover 颜色与其他 li 元素不同。
更新：我也在下面尝试过，但不知何故没有效果。
(function ($) {
$("ul.chosen-results li:nth-child(2)").css('background-color','yellow');
//$('ul.chosen-results > li:eq(1)').css('background','red');
})(jQuery);
更新 2全 HTML 车身链
<body class="html not-front logged-in no-sidebars page-node page-node-add page-node-add-event-webinars i18n-en admin-menu coffee-processed masquerade-float-block-processed">
<div id="site-content">
<div class="row">
<div id="second-sidebar" class="clearfix">
<div class="flex-wrapper">
<div id="content">
<div class="region region-content">
<div id="block-system-main" class="block block-system">
<div class="content">
<form class="node-form node-event_webinars-form" action="/node/add/event-webinars" method="post" id="event-webinars-node-form" accept-charset="UTF-8">
<div>
<div class="form-item-title form-wrapper" id="edit-title-field">
<div class="form-item form-type-select-or-other form-item-title-field-und">
<div class="select-or-other select-or-other-processed">
<div class="form-item form-type-select form-item-title-field-und-select">
<select class="select-or-other-select form-select required chosen-processed" id="edit-title-field-und-select" name="title_field[und][select]" style="display: none;">
<option value="" selected="selected">- Select -</option>
<option value="select_or_other">< select to create new webinar title or choose from existing below ></option>
</select>
<div class="chosen-container chosen-container-single select-or-other-select form-select required chosen-processed" title="" id="edit_title_field_und_select_chosen" style="width: 446px;">
<a class="chosen-single">
<span>- Select -</span>
<div><b></b></div>
</a>
<div class="chosen-drop">
<div class="chosen-search">
<input class="chosen-search-input" type="text" autocomplete="off">
</div>
<ul class="chosen-results">
<li class="active-result result-selected" data-option-array-index="0">- Select -</li>
<li class="active-result" data-option-array-index="1">select to create new title</li>
<li class="active-result" data-option-array-index="2">This</li>
<li class="active-result" data-option-array-index="3">That</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
3 个解决方案
解决方案1
2 2020-07-04 16:25:16
使用:nth-child(2)选择器到 select 第二个子元素或li:nth-of-type(2)获取第二个<li>子元素
解决方案2
2 2020-07-04 16:25:23
使用:eq()或.eq() 。 它们是从零开始的，所以1将是第二个元素：
$('ul.chosen-results > li:eq(1)').css('background','yellow')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="chosen-container chosen-container-single select-or-other-select form-select required chosen-processed" title="" id="edit_title_field_und_select_chosen"> <div class="chosen-drop"> <ul class="chosen-results"> <li class="active-result result-selected" data-option-array-index="0">- Select -</li> <li class="active-result" data-option-array-index="1">select to create new title</li> <li class="active-result" data-option-array-index="2">This</li> <li class="active-result" data-option-array-index="3">That</li> </ul> </div> </div>
解决方案3
1 2020-07-04 16:27:08
试试这个$("ul.chosen-results li:nth-child(2)").css('background-color','yellow');
编辑：
我已经尝试过了，它工作正常检查以下代码段
$("ul.chosen-results li:nth-child(2)").css('background-color','yellow');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="chosen-container chosen-container-single select-or-other-select form-select required chosen-processed" title="" id="edit_title_field_und_select_chosen"> <div class="chosen-drop"> <ul class="chosen-results"> <li class="active-result result-selected" data-option-array-index="0">- Select -</li> <li class="active-result" data-option-array-index="1">select to create new title</li> <li class="active-result" data-option-array-index="2">This</li> <li class="active-result" data-option-array-index="3">That</li> </ul> </div> </div>
我如何访问 css 上的第二个 ul 标签以使用 javascript 更改样式
[英]How i access to the second ul tag on css to change style with javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.