JQuery_jquery에서 두 개의 ul 태그의 li을 서로 이동시키는 구현 방법-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JQuery_jquery에서 두 개의 ul 태그의 li을 서로 이동시키는 구현 방법

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:58 PM

jqueryli

본 글의 예시에서는 JQuery에서 두 ul 태그의 li을 서로 이동시키는 구현 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.

<!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>

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

jquery实现多少秒后隐藏图片Apr 20, 2022 pm 05:33 PM

实现方法：1、用“$("img").delay(毫秒数).fadeOut()”语句，delay()设置延迟秒数；2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句，通过定时器来延迟。

axios与jquery的区别是什么Apr 20, 2022 pm 06:18 PM

区别：1、axios是一个异步请求框架，用于封装底层的XMLHttpRequest，而jquery是一个JavaScript库，只是顺便封装了dom操作；2、axios是基于承诺对象的，可以用承诺对象中的方法，而jquery不基于承诺对象。

jquery怎么修改min-height样式Apr 20, 2022 pm 12:19 PM

修改方法：1、用css()设置新样式，语法“$(元素).css("min-height","新值")”；2、用attr()，通过设置style属性来添加新样式，语法“$(元素).attr("style","min-height:新值")”。

jquery怎么在body中增加元素Apr 22, 2022 am 11:13 AM

增加元素的方法：1、用append()，语法“$("body").append(新元素)”，可向body内部的末尾处增加元素；2、用prepend()，语法“$("body").prepend(新元素)”，可向body内部的开始处增加元素。

jquery中apply()方法怎么用Apr 24, 2022 pm 05:35 PM

在jquery中，apply()方法用于改变this指向，使用另一个对象替换当前对象，是应用某一对象的一个方法，语法为“apply(thisobj,[argarray])”；参数argarray表示的是以数组的形式进行传递。

jquery怎么删除div内所有子元素Apr 21, 2022 pm 07:08 PM

删除方法：1、用empty()，语法“$("div").empty();”，可删除所有子节点和内容；2、用children()和remove()，语法“$("div").children().remove();”，只删除子元素，不删除内容。

jquery on()有几个参数Apr 21, 2022 am 11:29 AM

on()方法有4个参数：1、第一个参数不可省略，规定要从被选元素添加的一个或多个事件或命名空间；2、第二个参数可省略，规定元素的事件处理程序；3、第三个参数可省略，规定传递到函数的额外数据；4、第四个参数可省略，规定当事件发生时运行的函数。

jquery怎么去掉只读属性Apr 20, 2022 pm 07:55 PM

去掉方法：1、用“$(selector).removeAttr("readonly")”语句删除readonly属性；2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。

See all articles

핫 AI 도구

뜨거운 도구

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.