打開並用標籤包裝li元素

我試圖用一個標籤包裝兩個列表元素。默認情況下，只有一個列表再次有一個標籤。當單擊該元素時，我想從單擊的元素中刪除一個標籤，並將其添加到其他列出的元素中。然後，當第二個元素將被點擊做同樣的事情。我使用這些follwoing兩個functiosn工作，如果他們在不同的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>

來源

2014-10-22 user3186527

您的html無效，因爲'li'必須是'ul'的孩子 – 2014-10-22 05:16:49

http://jsfiddle.net/arunpjohny/fhs13rqe/1/ – 2014-10-22 06:04:28

第一關你的HTML是無效的li應該是ul或ol的直接孩子。

您需要使用on事件處理程序，因爲第二個元素被封裝時，click事件將不會附加到它。

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

這只是一個示例，如果你清楚你想做什麼，有更好的方法可以做到這一點？

來源

2014-10-22 05:29:21 Exlord

嗨Arjun和Exlord，感謝您的解決方案。我會嘗試他們並讓你知道。 – user3186527 2014-10-22 19:27:15

打開並用標籤包裝li元素

回答

相關問題