1

考虑以下HTML

<div class="container">
    <div class="item medium type">  value1  </div>
    <div class="item">  value2  </div>
    <div class="item large">  value3  </div>
    <div class="item small">   value4  </div>
    <div class="item">  value5  </div>
    <div class="item">  value6  </div>
    <div class="item">  value7  </div>
    <div class="item medium"> value8  </div>
    <div class="item">  value9  </div>
</div>

有没有一种简单的方法来编写一个 jQuery 选择器来获取container div不具有任何子类的所有子类？

例如，我需要编写一个选择器( ) 并仅获取具有值, , ,的$('myselector').each()item （因为这些s 没有任何子类）。divvalue2value5value6value7value9div

可能是我错过了明显的。但我做了一个快速搜索，几乎没有得到这方面的信息。

4

4 回答 4

5

您可以使用此选择器：

$('.container [class=item]')

它使每个孩子的类属性完全等于item（因此没有其他类）。

但它并不是真正可扩展的，如果您需要添加另一个不排除该元素的类怎么办？

也许您应该考虑向其他元素添加一个类，例如：

<div class="container">
    <div class="item sub medium type">  value1  </div>
    <div class="item">  value2  </div>
    <div class="item sub large">  value3  </div>
    <div class="item sub small">   value4  </div>
    <div class="item">  value5  </div>
    <div class="item">  value6  </div>
    <div class="item">  value7  </div>
    <div class="item sub medium"> value8  </div>
    <div class="item">  value9  </div>
</div>

然后:not在您的选择器中使用：

$('.container .item:not(.sub)')
于 2013-03-06T06:36:27.673 回答
1

尝试not

 $('.container .item').not('.medium , .large,.small,.type')

或属性选择器

$('.container [class=item]').each(function(){
   //do your stuff
});
于 2013-03-06T06:37:29.387 回答
1

您可以使用$("div[class$='item']")

你也可以看看http://api.jquery.com/category/selectors/

于 2013-03-06T06:37:52.490 回答
1

如果您像这样使用属性选择器：

$('.container [class=item]')

那么它只会匹配一个完全像这样的元素：

<div class="item">value1</div>

而不是这个（注意类名“item”周围的空格）：

<div class=" item  ">value1</div>

假设类属性中永远不会有空格是不安全的。由于某些 jQuery DOM 操作，可能会插入或留下空白。对此的解决方案是在选择仅具有类“项目”的所有元素之前修剪类属性。

$('.container')
    .children() // select all the elements contained within .container
    .each(function(){
        // strip whitespace from class attribute
        $(this).attr('class',$.trim($(this).attr('class')));
    });

// fade out all elements within .container that ONLY have the class
// "item" and nothing else
$('.container [class="item"]').fadeOut();
于 2013-03-06T06:47:35.690 回答