单击时将元素追加到最后一个

Question

我想将列表与其内容分开，并在点击时将其附加到最后一个我无法在最后添加它

这里是用于ul列表的html，我想在单击链接时将列表中的第一个子项分离，并将其放在列表的最后一个

var list = $('li.playing').detach();
var ctr = 0;
$('li').click(function(e) {
  if (ctr = 0) {
    $('li').append(list).show();
    list = $(this).detach();
  } else {
    list = $(this).detach();
  }
  $('li').append(list);
  $('li').siblings().removeClass('playing');
  $(this).addClass('playing');
});

li {
  display: block;
}

li.playing {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tab-links">
  <li class="playing">
    <div class="vidcon">
      <a href="#vid1">
        <div class="tumbnail">
        </div>
      </a>
      <div class="textlink">
        <a href="#vid1">Despacito (Song Cover by Sam Tsu) Live Love Party</a>
        <p class="info">Duration: 00:10:00<br>1,234,567 views<br>2 months ago</p>
      </div>
    </div>
  </li>
  <li>
    <div class="vidcon">
      <a href="#vid2">
        <div class="tumbnail">
        </div>
      </a>
      <div class="textlink">
        <a href="#vid2">All About that Base - Just Dance - Full Gameplay 5 Stars KINECT</a>
        <p class="info">Duration: 00:10:00<br>1,234,567 views<br>2 months ago</p>
      </div>
    </div>
  </li>
  <li>
    <div class="vidcon">
      <a href="#vid3">
        <div class="tumbnail">
        </div>
      </a>
      <div class="textlink">
        <a href="#vid3">Just Dance 2018: Side to Side - 5 stars</a>
        <p class="info">Duration: 00:10:00<br>1,234,567 views<br>2 months ago</p>
      </div>
    </div>
  </li>
  <li>
    <div class="vidcon">
      <a href="#vid4">
        <div class="tumbnail">
        </div>
      </a>
      <div class="textlink">
        <a href="#vid4">Twerk It Like Miley - The Fitness Marshall - Cardio Concert</a>
        <p class="info">Duration: 00:10:00<br>1,234,567 views<br>2 months ago</p>
      </div>
    </div>
  </li>
</ul>

CSS部分用于列表的显示功能，当它有class='playing'时，它不会显示为html，如果只显示li
Javascript部分是我的问题： 如果列表是playong的第一个孩子所以我不希望它出现在同一个div而不是隐藏它或从列表中分离它并把它放在最后

Answer 1

您不需要直接.append()将其分离到.parent()。

$('li').click(function (e) {
    $(this).siblings().removeClass('playing');
    $(this).addClass('playing');
    $(this).parent().append(this);
});

//Move current playing element to last
$('li.playing').appendTo('.tab-links');

＆＃13;

＆＃13;

$('li').click(function(e) {
  $(this).siblings().removeClass('playing');  
  $(this).addClass('playing');
  $(this).parent().append(this);
});

//Move current playing element
$('li.playing').appendTo('.tab-links');

＆＃13;

li {
  display: block;
}

li.playing {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tab-links">
  <li class="playing">
    <div class="vidcon">
      <a href="#vid1">
        <div class="tumbnail">
        </div>
      </a>
      <div class="textlink">
        <a href="#vid1">Despacito (Song Cover by Sam Tsu) Live Love Party</a>
        <p class="info">Duration: 00:10:00<br>1,234,567 views<br>2 months ago</p>
      </div>
    </div>
  </li>
  <li>
    <div class="vidcon">
      <a href="#vid2">
        <div class="tumbnail">
        </div>
      </a>
      <div class="textlink">
        <a href="#vid2">All About that Base - Just Dance - Full Gameplay 5 Stars KINECT</a>
        <p class="info">Duration: 00:10:00<br>1,234,567 views<br>2 months ago</p>
      </div>
    </div>
  </li>
  <li>
    <div class="vidcon">
      <a href="#vid3">
        <div class="tumbnail">
        </div>
      </a>
      <div class="textlink">
        <a href="#vid3">Just Dance 2018: Side to Side - 5 stars</a>
        <p class="info">Duration: 00:10:00<br>1,234,567 views<br>2 months ago</p>
      </div>
    </div>
  </li>
  <li>
    <div class="vidcon">
      <a href="#vid4">
        <div class="tumbnail">
        </div>
      </a>
      <div class="textlink">
        <a href="#vid4">Twerk It Like Miley - The Fitness Marshall - Cardio Concert</a>
        <p class="info">Duration: 00:10:00<br>1,234,567 views<br>2 months ago</p>
      </div>
    </div>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;