Heim > Artikel > Web-Frontend > Implementierungsmethode zum Verschieben der LI zweier UL-Tags zueinander in JQuery_jquery

Implementierungsmethode zum Verschieben der LI zweier UL-Tags zueinander in JQuery_jquery

WBOYOriginal: 2016-05-16 15:58:331259Durchsuche

Das Beispiel in diesem Artikel beschreibt die Implementierungsmethode zum Verschieben der li zweier ul-Tags zueinander in JQuery. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>两个ul标签中的li互相移动</title>
<style type="text/css">
ul{
 list-style-type:none;
 float:left;
 margin-right:30px;
 background-color:Green;
 width:100px;
 height:100px;
 padding:0px;
}
li{
 margin-bottom:5px;
 background-color:Red;
}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var myJson = [{ "id": "1", "Name": "刘德华", "Age": "52" },
{ "id": "2", "Name": "文章", "Age": "26" },
{"id":"3","Name":"孙红雷","Age":"40"},
{ "id": "4", "Name": "葛优", "Age": "58"}];
$(function () {
  //动态添加Json数据到leftUL中
  var $leftUL = $("#leftUL");
  var $rightUL = $("#rightUL");
  for (var i = 0; i < myJson.length; i++) {
   $myLi = $("<li id='" + myJson[i].id + "'>" + myJson[i].Name + "," + myJson[i].Age + "岁</li>");
   $myLi.click(function () {
    if ($(this).parent().attr("id") == "leftUL") {
     //通过判断父元素的ID来控制往哪个UL添加
     //$rightUL.append($(this)); //第一种方法
     $(this).appendTo($rightUL); //第二种方法
    }
    else {
     $(this).appendTo($leftUL); //第二种方法
    }
   });
   $leftUL.append($myLi);
  }
});
</script>
</head>
<body>
  <ul id="leftUL">
  </ul>
  <ul id="rightUL">
  </ul>
</body>
</html>

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Anwendungsbeispiele für die Methoden attr und removeAttr in JQuery_jqueryNächster Artikel：Anwendungsbeispiele für die Methoden attr und removeAttr in JQuery_jquery

In Verbindung stehende Artikel

Mehr sehen