2014-10-22 2 views
0

Я пытаюсь обернуть два элемента списка тегом. По умолчанию только один список снова имеет тег. Когда этот элемент нажат, я хочу удалить тег из щелкнутого элемента, добавив его в другой элемент. Затем, когда второй элемент будет нажат, сделайте то же самое. Я использовал эти два функционала, которые работают, если они находятся в другом 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 недействителен, так как 'li' должен быть дочерним элементом' ul' –

+0

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

ответ

0

первый от вашего HTML неверен li должен быть прямым потомком в ul или ol.

u необходимо использовать обработчик события 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

Привет, Арджун и Экслорд, спасибо за ваши решения. Я попробую их и дам вам знать. – user3186527

Смежные вопросы