0

私は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
  • プレミアム

どんな助けでも感謝します。

4

8 に答える 8

2

私は個人的にお勧めします：

// 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 フィドルのデモ。

テキストに 2 つのチェックボックスが表示されるのを避けるために、( からのdiv)チーム名をテキストとして使用する、わずかに変更されたバージョン:labelprem

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 フィドルのデモ。

参考文献:

于 2013-08-28T11:14:55.483 に答える
0

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

于 2013-08-28T11:04:37.743 に答える
0

jQuery.each を使用して、各 div をループします。関数パラメーターで、現在の div クラスに一致するクラスを持つ動的なチェックボックス要素を作成します。

于 2013-08-28T10:57:07.383 に答える
0

次のコードを試すことができます

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

于 2013-08-28T11:17:12.587 に答える
0

これを試して ： 

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

ここに画像の説明を入力

于 2013-08-28T11:09:44.007 に答える
0

多くの回答では、クラス名のグループ化が欠落しているようです。いくつかの関数型プログラミング手法を使用して、それを行う 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 はそれぞれのページにそれらの shim を持っています。

DIVFiddle には、チェックボックスがチェックされていない場合に関連する sを非表示にする、チェックボックスのいくつかの動作も含まれています。OPの全体的な目標はわかりませんが、これは、チェックボックスの名前の一部にすることで、チェックボックスを生成したクラス名に接続したままにする1つの方法を示すことでした。

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

しかし、これは主な目標にとって重要かもしれませんし、そうでないかもしれません。

于 2013-08-28T11:38:14.967 に答える
0

多分これはあなたを助けるでしょう！

var names = [];
$('div').map(function() {
    return this.name;
}).each(function(i, str) {
    if (!~$.inArray(str, names)) 
    names.push(str);
});
于 2013-08-28T10:58:13.863 に答える