Question

我正在制作ul li元素函数，例如select输入，用户可以从中选择框的颜色。

以下是代码：

＆＃13;

$(document).ready(function() {

  $('.color-picker ul.color-list li.active .text').after('<span class="pull-right glyphicon glyphicon-menu-down"></span>');

  $('.color-picker ul.color-list li').click(function() {


    if ($(this).hasClass('active')) {

      console.log(2);
      $('.color-picker ul.color-list li').show();
    } else {
      console.log(1);

      var color = $(this).find('.box').css('backgroundColor');
      $('.color-picker .color-box').css({
        'background-color': color
      });

      $('.color-picker ul.color-list li.active').removeClass('active');
      $('.color-picker ul.color-list li').hide();

      $(this).addClass('active');
      $('.color-picker ul.color-list li.active').show();
      $('.color-picker ul.color-list li .glyphicon').remove();
      $('.color-picker ul.color-list li.active .text').after('<span class="pull-right glyphicon glyphicon-menu-down"></span>');

    }

  });

});

＆＃13;

.color-picker {
  display: flex;
  margin: 20px;
  border: 1px solid #d9d9d9;
  padding: 10px;
  width: 350px;
}
.color-picker .color-box {
  display: inline-block;
  background-color: black;
  height: 50px;
  width: 50px;
}
.color-picker ul.color-list {
  display: inline-block;
  margin: 0;
  position: absolute;
}
.color-picker ul.color-list li {
  list-style: none;
  border: 1px solid #d9d9d9;
  padding: 10px;
  cursor: pointer;
  width: 200px;
  background-color: white;
}
.color-picker ul.color-list li.active {
  display: block;
}
.color-picker ul.color-list li {
  display: none;
}
.color-picker ul.color-list li .box {
  content: "";
  display: inline-block;
  height: 10px;
  width: 30px;
  margin-right: 10px;
}
.color-picker ul.color-list li.red .box {
  background-color: #c71212;
}
.color-picker ul.color-list li.blue .box {
  background-color: #0d89d1;
}
.color-picker ul.color-list li.green .box {
  background-color: #18c771;
}
.color-picker .as-select .select-default {
  border: 1px solid #d9d9d9;
  padding: 10px 20px;
  width: 200px;
  margin-left: 40px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="color-picker">

  <div class="color-box">
  </div>

  <div class="as-select">
    <ul class="color-list">
      <li class="red active">
        <span class="box"></span>
        <span class="text">Red</span>
      </li>
      <li class="blue">
        <span class="box"></span>
        <span class="text">Blue</span>
      </li>
      <li class="green">
        <span class="box"></span>
        <span class="text">Green</span>
      </li>
    </ul>
  </div>
</div>

＆＃13;

jsFiddle

如您所见，活动元素保持在同一位置。

（选择蓝色并再次点击下拉列表）

他们是否可以将所选元素作为列表中的第一个子元素？

Answer 1

利用 Flexbox ，您根本不需要随机播放元素。 CSS可以直观地移动＆＃34;他们适合你。

 .color-picker ul.color-list {
   display: inline-flex;
   margin: 0;
   flex-direction: column;
 }

 .color-picker ul.color-list li {
   list-style: none;
   border: 1px solid #d9d9d9;
   padding: 10px;
   cursor: pointer;
   order:2;
   width: 200px;
 }

 .color-picker ul.color-list li.active {
   display: block;
   order:1;
 }

JSfiddle Demo

Answer 2

您可以使用.prependTo()将active li元素添加到颜色选择器元素之前。

$(this).prependTo('.color-picker ul.color-list');

DEMO

Answer 3

您应该使用$('.color-list').prepend($(this));功能。

这应该有效：

{{1}}

工作JSFiddle

Answer 4

您可以使用以下命令将当前元素设置到列表的第一位：

$('.color-picker ul.color-list').prepend($(this));

https://jsfiddle.net/ksxhwo43/

Answer 5

将所选元素作为列表的第一个子元素的方法是分离所选项目的li dom元素并将其预先附加到ul dom元素中。

您可能会使用：

https://api.jquery.com/detach/

“当以后将删除的元素重新插入DOM时，此方法很有用。

http://api.jquery.com/prepend/“

“在匹配元素集合中的每个元素的开头插入”

在jQuery中重新排列列表元素

5 个答案: