交换列表中的项目

时间:2017-02-22 07:06:27

标签: jquery html css

我在列表中有5个项目。我想将第一个和最后一个项目保持在相同位置,并且需要将项目列表替换为滑块。



var i=0;
$('.flex-next').click(function(){
   i=i+2;
   alert(i);
  $(".thumbnailIcon li:eq(1)").before($(".thumbnailIcon li:eq(i)"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="parent flex-active-slider">
    <div class="node_id"><span>233</span></div>
    <ul class="thumbnailIcon">
      <li>left</li>  
      <li class="69">1</li>
      <li class="233">2</li>
      <li class="299">3</li>
      <li>right</li>  
    </ul> 
    </li>
    <li class="parent">
    <div class="node_id"><span>222</span></div>
    <ul class="thumbnailIcon">
      <li>left</li>  
      <li class="69">1</li>
      <li class="233">2</li>
      <li class="299">3</li>
      <li>right</li>  
    </ul> 
    </li>
    <a href="#" class="flex-next">click<a>
    <li class="parent">
    <div class="node_id"><span>333</span></div>
    <ul class="thumbnailIcon">
      <li>left</li>  
      <li class="69">1</li>
      <li class="233">2</li>
      <li class="299">3</li>
      <li>right</li>  
    </ul> 
    </li>
&#13;
&#13;
&#13;

我想更改所有thumbnailIcon列表项的位置,如图所示。 onload [0,1,2,3,4](工作),点击我要将列表的位置更改为[0,3,1,2,4],然后单击[0,2,3,1] ,4]。我想在点击功能中更改上面给出的列表。它可以做到。

2 个答案:

答案 0 :(得分:1)

你可以这样做:

var a = [0, 1, 2, 3, 4];
$('#view').text(a.toString());

function changeArray() {
    // get the first and lest elements, and remove them from array
    var first = this.a[0]
    var last = this.a[this.a.length - 1];
    a = this.a.slice(1, this.a.length - 1);

    // manipulate the internal array
    a.unshift(this.a.pop());
    
    // restore the first and last elements
    a.unshift(first);
    a.push(last);
    
    $('#view').text(a.toString());
}



    
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="view"></div>
<button type="button" onclick="changeArray()">change array</button>

答案 1 :(得分:1)

我希望这段代码可以帮到你。

if let string = boardInfoDic?["description"] as? String {
    boardNameLabel.text = String(format: "%@", string)
}
function changeAllOrder(){
  $('.thumbnailIcon').each(function(index, item){
  	var fourthLi = $(item).find("li:nth-child(4)");
    var secondLi = $(item).find("li:nth-child(2)");
		
    //normal
		$(secondLi).before(fourthLi);
  });
}

function changeSingleOrder(){
	event.preventDefault();
	var thumbnails = $(event.currentTarget).prev().find("ul");

  	var fourthLi = $(thumbnails).find("li:nth-child(4)");
    var secondLi = $(thumbnails).find("li:nth-child(2)");
	
  //reversed
	$(fourthLi).after(secondLi);
}