Question

我想更改dom中最后添加的元素的背景。为了让你更好看，这里是html：

    <div class="check-in-wrapper">
       <div class="ui-grid-a">
         <div class="ui-block-a">
            <span class="ticket-img">
                <img class="image" src="img/icons/ticket.png">
            </span>
        </div>

        <div class="ui-block-b">
          <h4>Inchecken</h4>
          <div class="check-in-notification-append"></div>
        </div>
       </div>
     </div>

     <div class="douane-wrapper">
      <div class="ui-grid-a">
       <div class="ui-block-a">
         <span class="douane-img">
             <img class="douane-img image" src="img/icons/douane.png">
          </span>
         </div>

          <div class="ui-block-b">
            <h4>Douane</h4>
            <div class="douane-notification-append"></div>
         </div>
       </div>
     </div>

  <div class="gate-wrapper">
    <div class="ui-grid-a">
     <div class="ui-block-a">
      <span class="gate-img">
       <img class="gate-img image" src="img/icons/gate.png">
      </span>
     </div>

     <div class="ui-block-b">
     <h4>Gate</h4>
       <div class="gate-notification-append"></div>
       </div>
  </div>

我将这些元素附加到check-in-notification-append，douane-in-notification-append，gate-in-notification-append这里更好地查看js文件。

  $(document).on("pagebeforeshow","#progress",function(){

    var incheckHtml = '';
    var douaneHtml = '';
    var gateHtml = '';

    for(var count = 0; count < info.data.length; count++){
        var shortmessage = info.data[count][3];
        var category = info.data[count][4];
        var typeOf = info.data[count][5];

        if(typeOf === "warning"){
            imgPath = 'img/icons/alarm.png';
        } else {
            imgPath = 'img/icons/alert.png';
        }


        if (!Array.prototype.last){
            Array.prototype.last = function(){
                return this[this.length - 1];
            };
        };


        if (category === 'inchecken'){
            incheckHtml = incheckHtml + "<div class='notification-item'><img class='notification-image' src=" + imgPath + "><span class='notification-text'>" + shortmessage + "</span></div>";
            // $('.check-in-wrapper').empty().prepend(incheckHtml); 
            $('.check-in-notification-append').empty().prepend(incheckHtml);
        }

        if(category === 'douane'){
            douaneHtml = douaneHtml + "<div class='notification-item overlay'><img class='notification-image' src=" + imgPath + "><span class='notification-text'>" + shortmessage + "</span></div>";
            $('.douane-notification-append').empty().prepend(douaneHtml); 
        }

        if(category === 'gate'){
            gateHtml = gateHtml + "<div class='notification-item overlay'><img class='notification-image' src=" + imgPath + "><span class='notification-text'>" + shortmessage + "</span></div>";
            $('.gate-notification-append').empty().prepend(gateHtml); 
        }
    }
});

但是如何访问删除类"overlay"的任何类别中最后添加的元素。我希望有人可以帮助我访问最后添加的元素和removeClass叠加层。我写了一个.last() function，但这只会给我数组中最后一个对象的输出...

Answer 1

我认为你可以通过使用一些适用于所有可能受影响的元素并使用Jquery的last（）函数的公共选择器来实现这一点。

$(".allMyThings").last().removeClass("overlay");

https://api.jquery.com/last/

更改动态添加元素的背景

1 个答案: