jqueryの：トリッキーなセレクタの質問

Question

こんにちは私は、このマークアップを持っています：

<div id="main">
     <div nam="item">1</div>
     <div nam="item">2</div>

     <div>
           <div nam="item">3</div>
           <div nam="item">4</div>
           <div nam="item">5</div>
     </div>

     <div nam="item">6</div>
     <div nam="item">7</div>
</div>

私は今、このメソッドを使用することによってのみ、直接の子divを選択しています：

var divs = $("#main > [nam]"

私の質問 - 私はセレクタを変更する必要があるだろうか、私は唯一の親のdivを渡す関数内でこれをやりたい。

？

function get_rootChildren(div)
{
      return($("* > [nam]",div));
}

^これは偽のですが、私はuは私が何を意味するか知っていると思う - これがどのように行うことができますか？ THX、伏羲

Answer 1

おそらくます：

$("#main > div.item")

から jQueryのセレクタドキュメントの

  

parent > child

     

「親」で指定された要素の「子」で指定されたすべての子要素にマッチします。

パート2答えるために - 私が使用するの .children() にこのような何かます：

function get_rootChildren(div) {
   $(div).children('div.item');
}

Answer 2

$('#main > div.item')

項目のクラスで唯一の直接の子div要素を選択し、#main div要素を選択します。

Answer 3

単に$（ "＃メイン> div.item"）を使用。 「>」セレクタは何を後に置くことは前に来るものの子であるということを確認します。

Answer 4

新しい質問を合わせて変更

//returns direct children of parent which are divs and have an attribute named name with value item
function get_rootChildren(parent){
  return $(" > div[nam='item']", parent);
}

<時間>

あなたの構造のコードは実際にあなたがして、次はそれを行います提供されたサンプルのように見えるように起こっている場合。

$('#main > div.item')

次は、より複雑な構造を処理することができます。

$("#main > div.item:not(:has(>div))").each(function(index,item){
    alert($(item).text());
});

例えば。最初は、1,2,3,5,6,7-を届けるだろうが、まだ唯一の1,2,6,7を送達する、次の私の第2のセレクタの

<div id=main>
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">
    <div class="item">3</div>
  </div>
  <div>
    <div>4</div>
  </div> 
  <div class="item">
    <div>5</div>
  </div> 
  <div class="item">6</div>
  <div class="item">7</div>
</div>

Answer 5

あなたは文字列として、親のIDを渡している場合、あなたはそれを呼び出す前に、あなたが式を構築することができます：

function get_rootChildren(divId) {
    var expr = "#" + divId + " > [nam]"; // creates expression for jQuery call
    return $(expr);
}