2016-07-22 9 views
0

ここには今日の些細な問題があります。JQueryの各セレクタ()は、現在のレベルだけを反復処理しますか?

私はJQueryでXMLファイルを解析しています。これには、要素を含む<property>といういくつかの項目のツリーが含まれています。ドロップダウンメニューを定義します。次に例を示します。

<property> 
    <option> 
     <text>option 1</text> 
    </option> 
    <option> 
     <text>option 2</text> 
    </option> 
    <option> 
     <text>option 3</text> 
    </option> 
</property> 

これは、解析する非常に簡単ですが、それは与えられたオプションが選択されている場合にのみ表示されますサブメニューを定義するために、時には別の<property><option>にネストされている:

<property> 
    <option> 
     <text>option 1</text> 
    </option> 
    <option> 
     <text>option 2</text> 
     <property> 
      <option> 
       <text>suboption 1</t 
      </option> 
      <option> 
       <text>suboption 2</text> 
      </option> 
     </property> 
    </option> 
    <option> 
     <text>option 3</text> 
    </option> 
</property> 

これらのネストされた<property>要素は、さらに<property>要素を含むことができます。基本的にはツリー構造です。

問題は、jQueryを使用して、特定のレベルから<option>要素を収集する方法です。私はこれを行う場合は...

$(xml).find('property').each(function() { 
    var selector = $('<select></select>', {'id': $(this).attr('id')}); 
    $(this).find('option').each(function() { 
     $(selector).append($('<option></option>', {'text': $(this).find('text').text()})); 
    }); 
    $('#controls').append(selector); 
}); 

...それは、現在のレベルからすべての<option>の要素とすべての下位レベルを収集します。私は現在のレベルを$(this)と呼んでいるので、JQueryに現在のレベル(レベル$(this))からのみ収集し、より低いレベルだけを残すように指示する方法はわかりません。誰かが私のjQueryの知識のこのギャップを修正してもらえますか?ありがとう。

+1

あなたのようにjQueryの '.children()'メソッドに見たことが:ここ

$('#controls').append(generateSelectElementFromXml(xml)); 

はCodePenの例です'.find()'の代わりに? https://api.jquery.com/children/ – SimianAngel

+0

同じことをしています。私はできます: '$(this).children( 'option')。each(function(){});'でも同じです。フィルタはあまり役に立ちません。 –

+0

** $(this).children( 'option')**は** $(this).find( 'option')**と同じではありません**。 – JonSG

答えて

0

EDIT:私のコメントはもっと答えるようになっています。うわー。 :)

.find()の代わりにjQueryの.children()メソッドを使用することを検討してください。そうすれば、あなたはただの子孫をたどるだけです。

function generateSelectElementFromXml(xml) { 
    var selector = $('<select></select>', {'id': $(this).attr('id')}); 
    $(xml).children('property').each(function() { 
    $(this).children('option').each(function() { 
     $(selector).append($('<option></option>', { 
      'text': $(this).children('text').text() 
     } 
    )); 
    }); 
    }); 
    return selector; 
} 

次に、あなたがあなたのコントロールにそうような<div><select>要素を生成することができます:http://codepen.io/anon/pen/NAYQAV