onclick开关div位置

Question

简要说明：当我单击它们时，需要切换div的位置。

要求：如果我单击hello，world这2应该切换，如果我单击hello2，world2这2将切换。 这是我的代码：

注意-我已经用一个复选框切换了div，注意-只有最上面的一个正在切换，我要在点击时实现切换

 // find elements var banner = $("#banner-message") var button = $("button") // handle click and add class button.on("click", function(){ alert("div swapped"); }) $('#check').change(function () { //alert('check clicked'); if ($(this).is(':checked')) { $('#div1').insertAfter($('#div2')); } else { $('#div1').insertBefore($('#div2')); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <div id="div1">Hello</div> <div id="div2">World</div> </div> <br> <div> <div id="div1">Hello2</div> <div id="div2">World2</div> </div> <br> click me to switch Hello,World<input type="checkbox" name="check" id="check"/> 

如果我单击hello，world这2应该切换，如果我单击hello2，world2那2将切换。

请帮忙。

Answer 1

如果我说对了，这就是您要寻找的东西：

 // find elements var banner = $("#banner-message") var button = $("button") // handle click and add class button.on("click", function(){ alert("div swapped"); }) $('.click').click(function (evt) { var $div = $(evt.target).closest('.switch'); $div.next('.switch').after($div); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="click"> <div class="switch">Hello</div> <div class="switch">World</div> </div> <br> <div class="click"> <div class="switch">Hello2</div> <div class="switch">World2</div> </div>