当我的第一个<LI>标签在排序中动态变化时,如何使它着色

抱歉,如果我的头衔确实很难理解,

我试图将Listview拖放,但是我希望我的第一个LI在拖放后始终着色,我该如何实现?

这是我现有的代码。

这是我的JavaScript:

    $("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

<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>

这是我目前所拥有的。

https://jsfiddle.net/rmallari/gr06mxow/8/

任何帮助将不胜感激,如果我的英语太差了,抱歉。

评论
  • Donne
    Donne 回复

    You can just use :first-child CSS selector to style the first li item

    .facet-list li:first-child{
       background-color: "#101F30;
       color: "#fff";
    }