Question

我对javascript / jquery很新，并且想知道是否可以收集div的类名，然后使用jQuery创建基于这些类名的复选框。例如。

<div class="champ">
  <h3>Reading</h3>
</div>

<div class="league1">
  <h3>Sheffield Wednesday</h3>
</div>

<div class="prem">
  <h3>Sunderland</h3>
</div>

<div class="prem">
  <h3>Tottenham Hotspur</h3>
</div>

<div class="champ">
  <h3>Watford</h3>
</div>

假设这是我的带有关联类名的html文件，我基本上希望结果能够为div提供类名称的复选框，同时避免重复相同的类名。

因此，对于上面的示例，它最终看起来像

champ
league1
PREM

感谢任何帮助。

Answer 1

我个人建议：

// creating new elements:
var newCheckbox = $('<input />', {
    'type' : 'checkbox',
    'name' : 'UKFootballClubs'
}),
    newLabel = $('<label />');
    wrapper = $('<div />').appendTo('body');
// iterating over each div that has a class:
$('div[class]').each(function(){
    /* appending a cloned label element, with the text set to the class-name
       of the current div element: */
    newLabel.clone().text(this.className).appendTo(wrapper);
    /* appending a clone of the new checkbox to the new label, 
       this allows a click on the label to un/select the checkbox: */
    newCheckbox.clone().prependTo(wrapper.find('label').last());
});

JS Fiddle demo

使用团队名称（来自div）作为label - 文本的略微更改的版本，以避免使用带有prem文本的两个复选框：< / p>

var newCheckbox = $('<input />', {
    'type' : 'checkbox',
    'name' : 'UKFootballClubs'
}),
    newLabel = $('<label />');
    wrapper = $('<div />').appendTo('body');
$('div[class]').each(function(){
    newLabel.clone().text($(this).text()).appendTo(wrapper);
    newCheckbox.clone().prependTo(wrapper.find('label').last());
});

JS Fiddle demo

但是，如果您更愿意使用类名（'prem'，'champ'等），那么您可以通过在附加新元素之前检查是否存在包含该文本的元素来防止重复复选框文本用那个文字：

var newCheckbox = $('<input />', {
    'type' : 'checkbox',
    'name' : 'UKFootballClubs'
}),
    newLabel = $('<label />');
    wrapper = $('<div />').appendTo('body');
$('div[class]').each(function(){
    var text = $.trim(this.className);
    if (!wrapper.find('label:contains('+text+')').length) {
        newLabel.clone().text(text).appendTo(wrapper);
        newCheckbox.clone().prependTo(wrapper.find('label').last());
    }
});

JS Fiddle demo

参考文献：

Answer 2

非常简单 / 说明性方式：

$('div').each(function(i,e) {
    var className = $(this).attr('class');
    var input='<input type="checkbox">'+className;
    $('body').append(input).append('<br>');
});

输出：

enter image description here

Answer 3

使用jQuery.each循环遍历每个div。并让函数参数创建一个动态复选框元素，其中的类与当前的divs类匹配。

Answer 4

也许这可以帮到你！

var names = [];
$('div').map(function() {
    return this.name;
}).each(function(i, str) {
    if (!~$.inArray(str, names)) 
    names.push(str);
});

Answer 5

http://jsfiddle.net/rgin/E7xZa/

$('div').each( function() {
    x = $(this).prop('class');
    $('<input />', { type:'checkbox', id:x,  name: x}).appendTo( $('.checklist') );
    $('<label />', { for:x, text:x }).appendTo( $('.checklist') );
});

这对你有用。当然，您需要使用比x更好的变量。 ;）

Answer 6

试试这个：

var myArray= new Array();
    window.onload = function(){


        var ele = document.getElementsByTagName('div');
        var k=0;
        for(var i=0;i<ele.length;i++)
        {
            var classes= ele[i].getAttribute('class');
            if(!there(classes))
            {
                myArray[k] = classes;
                k++;
            }           
        }
        var data="";
        for(var j=0;j<myArray.length;j++)
        {
            data += '<input type="checkbox" name="group" value="'+myArray[j]+'">'+myArray[j];
        }

            // Or do whatever you want
        document.write(data);
    }

function there(classes)
{
    for(var j=0;j<myArray.length;j++)
    {
        if(myArray[j]==classes)
        return true;
    }
    return false;
}

enter image description here

Answer 7

您可以尝试以下代码

$(document).ready(function(){    
    var uniqClass = [];
    $('div').each(function(){
        var className = $(this).attr('class');       
        if(!uniqClass[className]){
            uniqClass[className] = className;
        }
    });

    for(var prop in uniqClass){
        var input='<input type="checkbox">'+uniqClass[prop];
        $('body').append(input).append('<br>');
    }
})

小提琴：http://jsfiddle.net/vBhng/

Answer 8

很多答案似乎都缺少类名分组。这是 a Fiddle 使用一些函数式编程技术（reduce，map）来实现的：

var $checkboxes = $("<p>" + Object.keys($('div').toArray().map(function(div) {
    return div.className;
}).reduce(function(acc, name) {
    acc[name] = 1; return acc;
}, {})).reduce(function(html, name) {
    return html + name + ": " + "<input type='checkbox' id='cb-" + name + "' checked>"; 
}, "") + "<" + "/p>");
$checkboxes.appendTo("body");

如果您在所有目标环境中都没有reduce，map或Object.keys，则MDN会在相应的网页上为它们提供垫片。

小提琴还包括复选框的一些行为，如果未选中复选框，则隐藏相关的DIV。我不知道OP的总体目标，但这只是为了演示一种方法来保持复选框连接到生成它的类名，方法是将其作为复选框名称的一部分：

$checkboxes.on("change", ":checkbox",  function(evt) {
    var cb = this, className = cb.id.substring(3);
    $("." + className)[cb.checked ? "show" : "hide"]();
});

但这可能对主要目标有用，也可能不重要。

jQuery扫描div类名，使用这些类名打印匹配复选框

8 个答案: