Question

我需要从列表的唯一值创建复选框，如果我将类名作为项名称工作正常，我将获取所有值而不是唯一值

这是我的代码

＆＃13;

var html = '';
$('.bob').each(function() {
  var item = $(this).data('xyz');
  if (!$('input.' + item).length)
    $('.checkboxes').append('<label><input class="testclss"  data-var="' + item + '" type="checkbox" />' + item + '</label>');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="bob" data-xyz="fish"></div>
<div class="bob" data-xyz="dog"></div>
<div class="bob" data-xyz="fish"></div>
<div class="bob" data-xyz="cat"></div>
<div class="bob" data-xyz="fish"></div>
<div class="bob" data-xyz="fish"></div>

<div class="checkboxes"></div>

＆＃13;

Answer 1

＆＃13;

var html = '';
var arr = [];
$('.bob').each(function() {
  var item = $(this).data('xyz');
  if ($.inArray(item, arr) == -1) {//check if value exist in array
    arr.push(item)//add the value in array
  }

});
$.each(arr, function(i, v) {
  $('.checkboxes').append('<label><input class="testclss"  data-var="' + v + '" type="checkbox" />' + v + '</label>');


});
console.log(arr)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bob" data-xyz="fish"></div>
<div class="bob" data-xyz="dog"></div>
<div class="bob" data-xyz="fish"></div>
<div class="bob" data-xyz="cat"></div>
<div class="bob" data-xyz="fish"></div>
<div class="bob" data-xyz="fish"></div>

<div class="checkboxes"></div>

＆＃13;

您可以浏览div并在数组中添加每个值。
然后浏览数组并根据每个值创建复选框

Answer 2

试试这个：

检查是否存在任何带有任何data-var attr的复选框，并相应地生成复选框

＆＃13;

var html = '';
$('.bob').each(function() { 
    var item = $(this).data('xyz');
    if($("input[data-var='"+item+"']").length == 0)  
        $('.checkboxes').append('<label><input class="testclss"  data-var="' + item + '" type="checkbox" />' + item + '</label>');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="bob" data-xyz="fish"></div>
<div class="bob" data-xyz="dog"></div>
<div class="bob" data-xyz="fish"></div>
<div class="bob" data-xyz="cat"></div>
<div class="bob" data-xyz="fish"></div>
<div class="bob" data-xyz="fish"></div>

<div class="checkboxes"></div>

＆＃13;

Answer 3

此处的问题是您的条件if (!$('input.' + item).length)始终为true。因为您附加了一个类名为testclss且$('input.' + item).length的节点正在检查具有项变量类名的input节点的DOM。

所以，尝试添加一个具有真实类名的节点，即item，如下所示

  var html = '';
$('.bob').each(function() { 
    var item = $(this).data('xyz');
   if (!$('input.' + item).length)
        $('.checkboxes').append('<label><input class="'+item+'"  data-var="' + item + '" type="checkbox" />' + item + '</label>');
});

Answer 4

    var html = '';
    var items_arr = [];
    $('.bob').each(function() { 
    var item = $(this).data('xyz');
      if (!$('input.' + item).length)
      {

         items_arr.push(item);
      }
    });

    /*Creating unique array from above*/
    items_arr = items_arr.reverse().filter(function (e, i, items_arr) {
      return items_arr.indexOf(e, i+1) === -1;
    }).reverse();

    /*Then loop items_arr and set your html */  
     Add your code here     
    /**/

从列表中获取唯一值并在jquery中创建复选框

4 个答案: