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>