使用jQuery将标签插入div

我有这么长的复选框列表，其中的特定标签看起来像这样：

 Person 1  Person 2 

在这个表单下面我有六个div就像这样：

我有这个JS函数，所以当我点击一个复选框时，它的标签被插入到第一个div中。 这是它的样子：

 $(function(){ $('input:checkbox').click(function(){ var id = $(this).attr('id'); if($(this).is(':checked')){ $('#member1').text($('label[for="'+ id +'"]').text()); } else{ $('#member1').text(''); } }); }); 

所以一个问题是当前函数必须指定将其放入哪个div（＃member1）。 它应该工作，当第一个div是“满”时，下一个复选框将其标签插入第二个div，当那个完整时，第三个复选框将其标签插入第三个div等。

另一个问题是，如果取消选中复选框，则应从其div中删除其标签，并且其下方div中的标签应向上移动。 任何人都知道这是否可能？ 我会接受任何问题的帮助！

Answer 1

警告：我会完全不同地做到这一点。

但使用您当前的结构： 实时复制 | 来源 （使用有效id ）

 $(function(){ $('input:checkbox').click(function(){ var $cb = $(this), id = this.id, // No need for `attr` member, prev; if(this.checked){ // No need for `attr` $("div[id^=member]").each(function() { if (!this.firstChild) { // It's empty, use it $(this).text($('label[for="'+ id +'"]').text()).attr("data-contents", id); return false; // Done } }); } else { member = $('div[data-contents="' + id + '"]'); if (member[0]) { member.empty().removeAttr('data-contents'); prev = member[0]; member.nextAll().each(function() { if (!this.firstChild) { return false; // Done } prev.appendChild(this.firstChild); prev = this; }); } } }); }); 

我会做的最小改变：

• 将#memberX div放在一个容器中，这样我们就不必进行id^= search了。
• 根本不要在#memberX div上使用id值。
• 如果你不是绝对的，肯定需要它们 ，根本就没有空的#member div。 这将显着简化代码。
• 如果确实需要它们，在清除时，删除div并在最后添加一个新的空的div。

示例： 实时复制 | 资源

HTML：

只需用

"替换#membersX div。

JavaScript的：

 $(function(){ $('input:checkbox').click(function(){ var $cb = $(this), id = this.id; // No need for `attr` if(this.checked){ // No need for `attr` $("
") .text($('label[for="'+ id +'"]').text()) .attr("data-contents", id) .appendTo("#members"); } else { $('div[data-contents="' + id + '"]').remove(); } }); }); 

您可以通过移动复选框输入 label来简化甚至更多（这也意味着您可以取消使用for属性）： 资源

HTML：

  Person 1  Person 2 
 

JavaScript的：

 $(function(){ $('input:checkbox').click(function(){ var id = this.id; // No need for `attr` if(this.checked){ // No need for `attr` $("
") .text($(this.parentNode).text()) .attr("data-contents", id) .appendTo("#members"); } else { $('div[data-contents="' + id + '"]').remove(); } }); }); 

Answer 2

试试这个： jsFiddle示例 。

jQuery的

 $('input:checkbox').click(function() { if ($(this).is(':checked')) { $('div:empty:first').html($(this).next('label').html()); } else { var foo = $(this); $('div').each(function() { if ($(this).html() == foo.next('label').html()) { $(this).html($(this).next('div').html()); $(this).nextAll('div').each(function() { $(this).html($(this).next('div').html()); }); } }); } });​ 

Answer 3

如果我正确理解了您的问题，那么您可以获得X个可用的点，并且您只能填充那么多。 如果是这种情况，我认为这就是你要找的东西： jsFiddle 。 如果没有，其他一些解决方案可能会更好……

 var $selections = $('ul.selections'); $('input:checkbox').click(function() { var id = $(this).val(); if($(this).is(':checked')) { var $label = $(this).next('label'); var $spot = $selections.find('li:not(.full)'); if($spot.length == 0) { alert('no more spots open!'); return false; } $spot.eq(0).addClass('full').html($label.clone()); } else { var $label = $selections.find('label[for=' + id + ']'); $label.closest('li').remove(); $selections.append($('
').html(' ')); } }); 

使用此HTML：

 
Options
 
 
 Person 1
 
 Person 2
 .... 
 
Selections
  
 
 
 
 
 
 
 
 
 
 
 
 
  

我创建了它们列表，因为它们实际上就是它们，但是如果这就是你想要的，那么代码对于DIV也会起作用。 由于克隆了标签，因此单击选择列表上的标签将删除它。

Answer 4

基于您的代码的简单方法http://jsfiddle.net/joevallender/rTQMe/

 $(document).ready(function(){ $('input:checkbox').click(function(){ var $checked = $('#checked'); $checked.html(''); $('input:checkbox').each(function(index){ if($(this).is(':checked')) { $checked.append('
' + $('label[for="'+ $(this).attr('id') +'"]').text() + '
'); } }); }); }); 

Answer 5

有一些方法可以提高效率，但这应该适用于您的目的：

  $(function(){ var numberOfDivs = 6; $('input:checkbox').click(function(){ var id = $(this).attr('id'); if($(this).is(':checked')){ for(i = 1; i < numberOfDivs - 1; i++) { var div = $('#member' + i); if(div.text() !== ''){ div.text( ($('label[for="'+ id +'"]').text() ); } } } else{ var searchText = $('label[for="'+ id +'"]').text(); for(i = 1; i < numberOfDivs - 1; i++) { var div = $('#member' + i); if(div.text() === searchText){ div.text(''); } } } }); }); 

Answer 6

这是我将如何做到这一点：

 $(function(){ $('input:checkbox').click(function(){ var id = this.id; if(this.checked){ var member = $('#member1'); var i = 1; while(member.data('num') == 1) { member = $('#member'+(++i)); } member.text($('label[for="'+ id +'"]').text()).data('num',1); } else{ var removed = false; $('div').each(function(){ $(this).children('label').each(function(){ if(!removed && id == $(this).attr('for')) { removed = true; $(this).parent().remove('label[for="'+$(this).attr('for')+'"]'); } } if(removed) //bubble the labels up into the next highest div. { if($(this).data('num') == 1) var lastObject = $(this).children('label'); $(this).prev().append(lastObject); } } } }); });