jQuery / JavaScript: выбор первого «слоя» только для детей - PullRequest
Новая
       16

jQuery / JavaScript: выбор первого «слоя» только для детей

4 голосов
/ 06 декабря 2011

Я пытаюсь выбрать только первый «слой» дочерних элементов данного типа, но не элементы, вложенные в другой квалифицирующий элемент. Например. в: 

<div id='top'>
  <div id="s1" class="special">
    <div id="s2" class="special"></div>
  </div>
  <div>
    <div id="s3" class="special"></div>
  </div>
</div>

Я бы хотел найти # s1 и # s3, но не # s2, с чем-то вроде $ ('# top'). Find ('. Special: not_nested'). Возможно ли это с помощью jQuery? XPATH?

Я думал о пользовательских фильтрах jQuery, таких как expr [':']. Not_nested, но не могу понять, как учесть верхний родительский элемент (в данном случае $ ('top)), потому что может быть другие. специальные классы далее в родительской цепочке # top.

[править] Я должен упомянуть прямо сейчас, что я прибегаю к рекурсивному вызову $ .fn.children (), который, я думаю, не очень эффективен.

[edit2] проверенный рабочий код: 

    var node = $('#top'),
    result = (node.find('.special').filter(function(){
       return !($(this).parent().closest(".special", node).length);
    }));

Однако, это не работает, если у "#top" есть сам класс .special. Так что, может быть, это: 

var node = $('#top'),
result= node.find('.special').filter(function(){
   var parent = $(this).parent().closest(".special", node);
   return !parent.length || parent.is(node);
});

Ответы [ 3 ]

3 голосов
/ 06 декабря 2011

Другой вариант - использовать .children() вместо .find(), но он будет иметь тот же результат, что и решение idrumgood. 

$('#top').children('.special')

Редактировать: я только что реализовал вложение #s3,это может работать для этой ситуации: 

$('#top').find('.special').filter(function(){
  return $(this).closest('.special').length === 0;
}).doSomething()

Edit2: здесь вы идете: 

$('#top').find('.special').filter(function(){
   return !$(this).parent().closest(".special").closest("#top").length;
}).doSomething;
3 голосов
/ 06 декабря 2011

$('#top > .special'); > только прямые потомки.

За исключением того, что ваш код имеет #s3 также вложенный во вторичный div, поэтому я не уверен, что вы действительно хотите то, что вы просили.

0 голосов
/ 06 декабря 2011

Если это именно те div, вы можете попробовать использовать селекторы css с пробелами, например 

".one .three" and ".one"

за что-то подобное 

<div class="one">
    <div class="two">
         <div class="three">
...