2014-10-22 2 views
0

태그가있는 두 개의 목록 요소를 래핑하려고합니다. 기본적으로 하나의 목록에만 a 태그가 있습니다. 해당 요소를 클릭하면 클릭 한 요소에서 태그를 제거하고 다른 요소를 추가합니다. 그런 다음 두 번째 요소가 클릭 될 때 동일한 작업을 수행하십시오. 나는이 두 가지 기능을 사용했는데, 서로 다른 HTML 문서를 사용하고 있지만 함께 사용하면 효과가있다. 하나만 작동합니다. 어떤 도움이 필요합니까? 당신의 HTML 오프 첫 태그를 사용하여 li 요소를 래핑하십시오.

var pTags = $("#ab"); 
var pTags1 = $("#cd"); 

$("#xx").click(function() 
{ 
if (pTags1.parent().is("a")) 
{ 
pTags1.unwrap(); 
pTags.wrap("<a href='#' id='xv'></a>"); 
} 
}); 
$("#xv").click(function() 
{ 
if (pTags.parent().is("a")) 
{ 
pTags.unwrap(); 
pTags1.wrap("<a href='#' id='xx'></a>"); 
} 
}); 
</script> 



<!doctype html> 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>unwrap demo</title> 
<script src="http://code.jquery.com/jquery-latest.min.js" 
    type="text/javascript"></script> 
</head> 
<body> 
<li id="ab">Hello</li> 
<a href="#" id="xx"><li id="cd">cruel</li></a> 
</body> 

<script> 

var pTags = $("#ab"); 
var pTags1 = $("#cd"); 

$("#xx").click(function() 
{ 
if (pTags1.parent().is("a")) 
{ 
pTags1.unwrap(); 
pTags.wrap("<a href='#' id='xv'></a>"); 
} 
}); 
$("#xv").click(function() 
{ 
if (pTags.parent().is("a")) 
{ 
pTags.unwrap(); 
pTags1.wrap("<a href='#' id='xx'></a>"); 
} 
}); 
</script> 
</html> 
+1

html이'ul'의 자식이어야합니다. –

+0

http://jsfiddle.net/arunpjohny/fhs13rqe/1/ –

답변

0

liul 또는 ol의 직접 자식이어야한다 유효하지 않습니다.

두 번째 요소가 래핑 될 때 click 이벤트가 첨부되지 않기 때문에 on 이벤트 처리기를 사용해야합니다.

<span id="ab">Hello</span> 
<a href="#" class="clickable" id="xx"><span id="cd">cruel</span></a> 
<script> 
    $(document).ready(function() { 
     $(document).on('click', 'a.clickable', function() { 
      var id = $(this).attr('id'); 
      $('span', this).unwrap(); 

      if (id == 'xx') { 
       $('#ab').wrap("<a href='#' class='clickable' id='xv'></a>"); 
      } 
      else if (id == 'xv') 
       $('#cd').wrap("<a href='#' class='clickable' id='xx'></a>"); 

     }); 
    }); 
</script> 

당신이하고 싶은 일에 대해 명확히 알고 싶다면 이것은 더 좋은 방법이 있습니다.

+0

안녕하세요 Arjun 및 Exlord 님, 솔루션에 감사드립니다. 나는 그들을 시험해보고 당신에게 알려줄 것입니다. – user3186527

관련 문제