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

我对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
• 普莱姆

---

感谢您的帮助。

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

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

也许这对你有帮助

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

也许这对你有帮助

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

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

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

$（'div'）。每个（函数（即，e）{
var className=$（this.attr（'class'）；
变量输入=“”+类名；
$（'body'）.append（输入）.append（'
'）；
});

产出：

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

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

$（'div'）。每个（函数（即，e）{
var className=$（this.attr（'class'）；
变量输入=“”+类名；
$（'body'）.append（输入）.append（'
'）；
});

产出：

$（'div'）。每个（函数（）{
x=$（this.prop（'class'）；
$（''，{type:'checkbox'，id:x，name:x}）.appendTo（$（'.checklist'）；
$（''，{for:x，text:x}）.appendTo（$（'.checklist'）；
});

这应该对你有用。当然，您需要使用一个更好的变量，而不仅仅是

x

；）

$（'div'）。每个（函数（）{
x=$（this.prop（'class'）；
$（''，{type:'checkbox'，id:x，name:x}）.appendTo（$（'.checklist'）；
$（''，{for:x，text:x}）.appendTo（$（'.checklist'）；
});

这应该对你有用。当然，您需要使用一个更好的变量，而不仅仅是

x

；）

试试这个：

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

var myArray=new Array（）；
window.onload=函数（）{
var ele=document.getElementsByTagName（'div'）；
var k=0；
对于（var i=0；i尝试以下方法：

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

var myArray=new Array（）；
window.onload=函数（）{
var ele=document.getElementsByTagName（'div'）；
var k=0；
对于（var i=0；i我个人建议：

// 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());
});


但是，如果您更愿意使用类名（'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());
    }
});

var newCheckbox=$（“”{
'类型'：'复选框'，
“名称”：“英国足球俱乐部”
}),
新标签=$（''）；
包装器=$（''）.appendTo（'body'）；
$（'div[class]'）。每个（函数（）{
var text=$.trim（this.className）；
如果（！wrapper.find（'标签：包含（'+text+'）））.length）{
newLabel.clone（）.text（text）.appendTo（wrapper）；
newCheckbox.clone（）.prependTo（wrapper.find（'label'）.last（））；
}
});


参考资料：










我个人建议：

// 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());
});


但是，如果您更愿意使用类名（'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());
    }
});

var newCheckbox=$（“”{
'类型'：'复选框'，
“名称”：“英国足球俱乐部”
}),
新标签=$（''）；
包装器=$（''）.appendTo（'body'）；
$（'div[class]'）。每个（函数（）{
var text=$.trim（this.className）；
如果（！wrapper.find（'标签：包含（'+text+'）））.length）{
newLabel.clone（）.text（text）.appendTo（wrapper）；
newCheckbox.clone（）.prependTo（wrapper.find（'label'）.last（））；
}
});


参考资料：










您可以尝试以下代码

$(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>');
    }
})

$（文档）.ready（函数（）{
var uniqClass=[]；
$（'div'）。每个（函数（）{
var className=$（this.attr（'class'）；
如果（！uniqClass[className]）{
uniqClass[className]=类名；
}
});
for（uniqClass中的var prop）{
变量输入=“”+uniqClass[prop]；
$（'body'）.append（输入）.append（'
'）；
}
})

fiddle:
您可以尝试以下代码

$(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>');
    }
})

$（文档）.ready（函数（）{
var uniqClass=[]；
$（'div'）。每个（函数（）{
var className=$（this.attr（'class'）；
如果（！uniqClass[className]）{
uniqClass[className]=类名；
}
});
for（uniqClass中的var prop）{
变量输入=“”+uniqClass[prop]；
$（'body'）.append（输入）.append（'
'）；
}
})

fiddle:
许多答案似乎缺少类名的分组。下面是使用一些函数编程技术（
reduce
，
map
）的：

但是这可能对主要目标很重要，也可能不重要。
许多答案似乎缺少类名的分组。下面是，使用一些函数编程技术（
reduce
，
map
）：

但这对主要目标可能很重要，也可能不重要。
默认情况下，它们应该被检查，还是不检查？如果元素中有两个以上的类名呢？默认情况下不检查，我的目标是尝试按联赛对足球队进行排序。不太确定这两个类名，因为我还没有真正想过。真的