2016-04-26 11 views
0

私はクラス名として状態名の異なる項目のリストを生成しています。これらのリストアイテムは、同じクラス名を持つがidとして、順序なしリストに追加する必要があります。順序付けられていないリストIDと同じクラス名のリスト項目を追加するにはどうすればよいですか?

<ul id="Montana"></ul> 
<ul id="Nebraska"></ul> 
<ul id="Oregon"></ul> 
<li class="Montana>Hello World</li> 
<li class="Montana>Hello World</li> 
<li class="Oregon>Hello World</li> 
<li class="Nebraska>Hello World</li> 
<li class="Montana>Hello World</li> 
<li class="Montana>Hello World</li> 
<li class="Oregon>Hello World</li> 
<li class="Montana>Hello World</li> 

は、通常、私はちょうどのようなforループを介して、追加したい::

for(var i =0; i < something.length; i++){ $('#' + something[i]).append('.' + something[i]); 

しかし、それが現在動作していないので、現在、DOMは次のようになります。正直なところ、私はちょうどミニストロークをしているかもしれないし、顔の叩きが必要です。

アドバイスはありますか?顔を叩く?

EDIT:

JSONブロブが返されました。そのキーと値のペアの1つは、状態が何であれ、「状態」です。私はそのBLOBを介してforループを実行し、それらのクラス/ ID名を持つulとliの束を作成します。私はすべてのコードを表示したいと思いますが、私はSVG関連のものをたくさん追加して、質問を膨らませます。

+0

もっとコードコンテキストを使うことができました... – IMTheNachoMan

+0

あなたのコードには何がありますか? – IMTheNachoMan

答えて

1

これは機能しますか? liをすべて取得し、それらを繰り返し、各liクラスに一致するIDを見つけ、liを追加します。 jQueryを使って

var lis = document.getElementsByTagName("li"); 
for(var i = 0, numLis = lis.length; i < numLis; ++i) 
{ 
    document.getElementById(lis[i].className).appendChild(lis[i]); 
} 
1

:あなたはクラス/ IDなどの状態名を追加している理由

$('li').each(function(index, li){ 
    li = $(li); 
    li.appendTo($('ul#' + li.attr('class'))); 
}); 
0

は、私にはわからないが、私はこの種のものを追加することはお勧めしません(一般的にページデータ)属性にhtmlを追加します(ただし、 'data'属性に追加しない限り)。一般的に、クラスとIDはスタイリングと機能性のためのもので、データは別の要素になければなりません。

代わりに要素階層を作成できます。このような何か:

<li class="state-li"> 
    <div class="text"> 
    Hello World 
    </div> 
    <div class="state-name hidden"> 
    Montana 
    </div> 
</li> 

は、あなたが簡単に

クラスstate-li

の子供を見つけるために、jQueryのを使用することができますが、あなたの質問に答えるために(jQueryの):すべての人に

elementToAppendTo = $('#elementId'); 
stateList = [list of states]; 
var length = stateList.length; 

for(var i = 0; i < length; i++) { 
    $(elementToAppendTo).append("<li id='" + stateList[i] + "'></li>"); 
} 
0

ありがとう!私はフィーニングをしました。

$('.' + something[i].stateName).appendTo('#' + something[i].stateName); 

トリックをやっています。それは私があなたが提供してくれたアドバイスも効果があると確信しています。

関連する問題