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

Question

已关闭。此问题不符合 Stack Overflow guidelines 。目前不接受答案。

---

要求提供代码的问题必须表现出对所解决问题的最低限度的了解。包括尝试的解决方案、为什么它们不起作用以及预期结果。另请参阅:Stack Overflow question checklist

已关闭 9 年前。

Improve this 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
• 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)作为标签文本，以避免出现两个带有 的复选框>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 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 .

引用文献:

• appendTo() .
• :contains() selector .
• clone() .
• each() .
• find() .
• last() .
• prependTo() .
• text() .