[英]How can i make my first <LI> Tag to be colored when it dynamically changes in sorting
Sorry if my title is really difficult to understand.对不起,如果我的标题真的很难理解。
I am trying to make my Listview to be drag and drop, but I want my first <li>
tag to be colored always after it has been dragged and droped, how can I implement that?我试图让我的 Listview 被拖放,但我希望我的第一个
<li>
标签在拖放后总是被着色,我该如何实现?
here is my existing code:这是我现有的代码:
$("li").first().css( "background-color", "#101F30" );
$("li").first().css( "color", "#fff" );
// For default timezone listview
$(function() {
$("#allTimezoneFacets, #userTimezoneFacets").sortable({
connectWith: "ul",
placeholder: "placeholder",
delay: 150
})
.disableSelection()
.click(function(e) {
var item = e.target;
console.log(item);
});
});
HTML: HTML:
<div class="wrapper_timezone">
<ul id="allTimezoneFacets" class="facet-list">
<li class="facet">
<p class="timezone_right" id="timezone_tn_date"></p>
<h2 class="timezone_initial">TN</h2>
<h2 class="timezone_initial timezone_right timezone_right_padding" id="timezone_tn_time"></h2>
<p class="timezone_padding">Tennessee</p>
</li>
<li class="facet">
<p class="timezone_right" id="timezone_ny_date"></p>
<h2 class="timezone_initial">NY</h2>
<h2 class="timezone_initial timezone_right timezone_right_padding" id="timezone_ny_time"></h2>
<p class="timezone_padding">New York</p>
</li>
<li class="facet">
<p class="timezone_right timezone_ph_date" id="timezone_ph_date"></p>
<h2 class="timezone_initial">PH</h2>
<h2 class="timezone_initial timezone_right timezone_right_padding timezone_ph_time" id="timezone_ph_time">9:01:43 AM</h2>
<p class="timezone_padding">Philippines</p>
</li>
<li class="facet">
<p class="timezone_right" id="timezone_ca_date"></p>
<h2 class="timezone_initial">CA</h2>
<h2 class="timezone_initial timezone_right timezone_right_padding" id="timezone_ca_time"></h2>
<p class="timezone_padding">California</p>
</li>
<li class="facet">
<p class="timezone_right timezone_id_date">Friday, January 31, 2020</p>
<h2 class="timezone_initial">ID (MT)</h2>
<h2 class="timezone_initial timezone_right timezone_right_padding timezone_id_time">3:01:43 PM</h2>
<p class="timezone_padding">Idaho-Mountain</p>
</li>
<li class="facet">
<p class="timezone_right" id="timezone_ak_date"></p>
<h2 class="timezone_initial">AK</h2>
<h2 class="timezone_initial timezone_right timezone_right_padding" id="timezone_ak_time"></h2>
<p class="timezone_padding">Alaska</p>
</li>
<li class="facet">
<p class="timezone_right" id="timezone_pr_date">Friday, January 31, 2020</p>
<h2 class="timezone_initial">PR</h2>
<h2 class="timezone_initial timezone_right timezone_right_padding" id="timezone_pr_time">9:01:43 PM</h2>
<p class="timezone_padding">Puerto Rico</p>
</li>
</ul>
</div>
here is what I currently have.这是我目前拥有的。
https://jsfiddle.net/rmallari/gr06mxow/8/
Any help would be really appreciated, sorry if my english is poor.任何帮助将不胜感激,对不起,如果我的英语很差。
You can just use :first-child
CSS selector to style the first li
item您可以只使用
:first-child
CSS 选择器来设置第一个li
项的样式
.facet-list li:first-child{
background-color: "#101F30;
color: "#fff";
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.