选择不在容器jquery中的子项

时间:2014-06-19 15:31:57

标签: javascript jquery jquery-selectors

这似乎是一个容易出问题的问题但我在解决这个问题时遇到了一些麻烦。给出的示例是SSCCE,我有一个更大的问题,试图解决。为了使其工作,查询必须不包含任何直接子选择器(>),因为dom树比这个例子复杂一点。

我的目标是选择所有不属于包含课程的家长的孩子。在此示例中,我尝试选择2个div容器helloworld,但不选择foobar

这是一个为您提供便利的代码。 http://plnkr.co/edit/4zsKAFts5X7X2kLADj2V?p=preview


使用此HTML:

<div id="root" class="parent">
  <div>
    <div class="child">hello</div>
    <div class="child">world</div>
  </div>
  <div class="parent">
    <div>
      <div class="child">foo</div>
      <div class="child">bar</div>
    </div>
  </div>
</div>

这个Javascript:

var root = $('#root');
$(':not(.parent) .child', root).css('font-weight', 'bold');

我看到了这个结果:

  

你好

     

世界

     

FOO

     

但我想得到的是

  

你好

     

世界

     

FOO

     


重申我希望从给定节点(在此示例中为child)中获取类parent的所有没有父类#root的元素。

5 个答案:

答案 0 :(得分:3)

var root = $('#root');
$('.child',  root).not($("#root .parent .child")).css('font-weight', 'bold');

<强> jsFiddle example

答案 1 :(得分:1)

这可能不是很漂亮但是你去了:

$('#root').find('.child').filter(function(){
    if($(this).parents('.parent').first().attr('id') === 'root'){
        return 1;
    }
    else{
        return 0;
    }
}).css('font-weight', 'bold');

<强> http://jsfiddle.net/PDZL8/

答案 2 :(得分:1)

JSFiddle:http://jsfiddle.net/TrueBlueAussie/78G6N/3/

var root = $('#root');
$('#root').find('.child').filter(function(){
    return $(this).closest('.parent').is(root);
}).css('font-weight', 'bold');

我还改进了j08691的解决方案,以便它使用提供的根节点,而不是复制选择器(不可移植):

http://jsfiddle.net/TrueBlueAussie/78G6N/4/

var root = $('#root');
$('.child',  root).not(root.find(".parent .child")).css('font-weight', 'bold');

答案 3 :(得分:0)

您可以使用:

$('#root').find('.child').filter(function(){
    return $(this).parents('.parent').length <= 1;
}).css('font-weight', 'bold');

检查div的父亲数,如果它低于或等于1,则返回孩子。

小提琴:http://jsfiddle.net/akwPb/

答案 4 :(得分:0)

    $("#root .child:not(#root .parent * .child)")
    .css("font-weight", "bold")

jsfiddle http://jsfiddle.net/guest271314/UJJXU/