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

^这是假的，但我想你知道我的意思 - 怎么可能这样做？ thx，fuxi

Answer 1

也许：

$("#main > div.item")

来自jQuery Selector Docs

parent > child

匹配由“parent”指定的元素“child”指定的所有子元素。

要回答第二部分 - 我会使用.children()这样的东西：

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

Answer 2

$('#main > div.item')

选择#main div，然后只选择带有item类的直接子div元素。

Answer 3

只需使用$（“＃main＆gt; div.item”）。 “＆gt;”选择器确保你之后的内容是之前的孩子。

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

e.g。在下面我的第二个选择器仍然只能提供1,2,6,7，而第一个选择器将提供1,2,3,5,6,7

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

jquery：棘手的选择器问题

5 个答案:

`parent > child`