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

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 的类名的复选框，同时避免任何重复相同的类名。

所以对于上面的例子，它最终看起来像

• 冠军
• 联赛1
• 前置

感谢任何帮助。

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 小提琴演示。

一个稍微改动的版本，它使用团队名称（来自div）作为label-text 以避免在prem文本中有两个复选框：

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 小提琴演示。

但是，如果您更愿意使用类名（“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 小提琴演示。

参考：

• appendTo().
• :contains()选择器。
• clone().
• each().
• find().
• last().
• prependTo().
• text().

Answer 2

一个非常 简单/说明性的方法：

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

输出：

Answer 3

尝试这个 ：

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

Answer 4

很多答案似乎都缺少类名的分组。这是一个使用一些函数式编程技术（, ）的 Fiddle ：reducemap

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 会在相应页面上为它们提供 shims。

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

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

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

Answer 5

你可以试试下面的代码

$(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 6

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

Answer 7

也许这对你有帮助！

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

Answer 8

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。;)