Div穿越jquery

Question

我想知道，当我点击下一个按钮时，id="upper1"成为id="upper2"而id="upper2"成为id="upper3"而id="upper3"成为id="upper1"等等。

  

Jquery的

$（'＃next'）。click（function（）{

var $dives = $('div');

var total_div = $sel.length;


for (var i = 1; i <= total_div; i++) {
$dives.eq(i).attr('id', $dives.eq(i + 1).attr('id'));
}


});

  

CSS

#upper1{
    background-color:red; 
}

#upper2{
    background-color:yellow; 
}

#upper3{
    background-color:orange; 
}

  

HTML

    <div id="upper1">9</div>
    <div id="upper2">8</div>
    <div id="upper3">7</div>
    <button id="next">Next</button>

Answer 1

使用jQuery，您可以使用：

$("#next").click(function() {
  var i1 = $("#upper1");
  var i2 = $("#upper2");
  var i3 = $("#upper3");
  i1.attr("id", "upper2");
  i2.attr("id", "upper3");
  i3.attr("id", "upper1");
});

您需要将代码放在等待页面加载的块中，如：

$(document).ready(function() {
  <code here>
});

attr的使用允许为每个前身份ID设置新的id。查看jsFiddle。

另外，正如其他人所指出的那样，通过修改id并更改定义要旋转的属性的类，可以做得更好。

Answer 2

你可能会做这样的事情，可以使用任意数量的带有任何ID的元素：

＆＃13;

＆＃13;

$('#next').click(function() {
  let $sel = $('.container > div')
  let l = $sel.length;
  let last = $sel.eq(l - 1).attr('id');
  for (let i = l - 1; i >= 1; i--) {
    $sel.eq(i).attr('id', $sel.eq(i - 1).attr('id'));
  }
  $sel.eq(0).attr('id', last);
})

＆＃13;

#upper1 {
  background-color: red;
}

#upper2 {
  background-color: yellow;
}

#upper3 {
  background-color: orange;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="upper1">9</div>
  <div id="upper2">8</div>
  <div id="upper3">7</div>
</div>
<button id="next">Next</button>

＆＃13;

＆＃13;

＆＃13;

Answer 3

真正改变ids本身的目标还是更换元素？ （含内容）

$('#next').click(function(){
	$("#container").children().last().prependTo("#container");
})

#upper1{
    background-color:red; 
}

#upper2{
    background-color:yellow; 
}

#upper3{
    background-color:orange; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="upper1">9</div>
  <div id="upper2">8</div>
  <div id="upper3">7</div>
</div>

    <button id="next">Next</button>

或者如果目标是切换颜色而不是元素本身，则可以使用类来完成，而不是交换ID：

$('#next').click(function(){	
	 $("[class^=upper]").each(function(){
   	this.className = "upper" + (((this.className.substring(5) + 1) % 3)+1);    
  });
})

.upper1{
    background-color:red; 
}

.upper2{
    background-color:yellow; 
}

.upper3{
    background-color:orange; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="upper1">9</div>
<div class="upper2">8</div>
<div class="upper3">7</div>

<button id="next">Next</button>

Answer 4

我猜你真的想要改变div而不是替换id。

let divs = $(yourDivSelector);
divs.first().prepend(divs.last());

此代码会将最后一个移到顶部，从而将其余部分向下移动一步。