Как удалить элементы-потомки из набора JQuery? - PullRequest
Новая
       14

Как удалить элементы-потомки из набора JQuery?

2 голосов
/ 12 мая 2010

Меня немного смущает вопрос о том, какой метод jQuery и / или селекторы использовать при попытке выбрать элемент, а затем удалить определенные элементы-потомки из упакованного набора.

Например, с учетом следующего HTML: 

<div id="article">
  <div id="inset">
    <ul>
      <li>This is bullet point #1.</li>
      <li>This is bullet point #2.</li>
      <li>This is bullet point #3.</li>
    </ul>
  </div>
  <p>This is the first paragraph of the article</p>
  <p>This is the second paragraph of the article</p>
  <p>This is the third paragraph of the article</p>
</div>

Я хочу выбрать статью: 

var $article = $('#article');

, но затем удалите <div id="inset"></div> и его потомков из упакованного набора. Я попробовал следующее: 

var $article = $('#article').not('#inset');

но это не сработало, и, оглядываясь назад, я думаю, я понимаю, почему. Я также безуспешно пытался использовать remove().

Как правильно это сделать?

В конечном итоге мне нужно настроить это таким образом, чтобы я мог определить массив конфигурации, например: 

var selectors = [
  {
    select: '#article',
    exclude: ['#inset']
  }
];

, где select определяет один элемент, содержащий текстовое содержимое, а exclude - необязательный массив, определяющий один или несколько селекторов для игнорирования текстового содержимого.

Учитывая окончательный упакованный набор с удаленными исключенными элементами, я хотел бы иметь возможность вызвать метод text() в jQuery, чтобы получить следующий текст:

Это первый абзац статьи.
Это второй абзац статьи.
Это третий абзац статьи.

Массив конфигурации не должен работать точно так же, но он должен обеспечивать примерно эквивалентный потенциал конфигурации.

Спасибо за любую помощь, которую вы можете оказать!

Ответы [ 4 ]

5 голосов
/ 12 мая 2010

Полагаю, вы не хотите изменять исходный HTML, удаляя из него элементы, но вы хотите просто получить содержимое статьи без вставки. Вот почему я бы использовал clone (), чтобы получить копию статьи, а затем удалить из нее вставку.

Как это: 

$("#article").clone().find("#inset").remove().end().text()
  • $ ("# article") выбирает div статьи, клон создает копия,
  • находка заставляет детей удалить (вы также можете использовать детей),
  • remove (), удаляет выбранную вставку,
  • end () возвращает к исходному выделению.

В конце я просто добавил текст (), как вы упомянули, что вы хотите это сделать.

2 голосов
/ 12 мая 2010

, если вы хотите удалить что-либо в #article, но используйте #inset: 

$('#article > *:not(#inset)').remove() // selects all direct children of #article but not #inset and removes them

см. Пример здесь: http://jsfiddle.net/zwPsD/

если вы хотите применить это правило более чем к одному элементу DOM, вы можете объединить их в цепочку: 

$('#article, #article2, #article3, #etc').find('> *').not('#inset, #that, #and. #there').remove()

Вы можете найти пример этого здесь: http://jsfiddle.net/ZNjdE/

и с помощью простого каждого вы можете извлечь текст: http://jsfiddle.net/ZNjdE/2/

0 голосов
/ 12 мая 2010

Если я что-то упустил, почему вы не можете выбрать все элементы <p> в статье div? 

$("#article p")

Если это неприемлемо, я думаю, вы ищете функцию filter ... 

$("#article").filter(":not(#inset)")

Примечание: у вас может быть несколько селекторов в селекторе: not (). Они просто должны быть разделены запятыми, поэтому этот подход должен учитывать ваши потребности в конфигурации.

0 голосов
/ 12 мая 2010

Попробуйте что-то вроде этого. 

$('#article').children(':not(#inset)').each(function(){
    alert($(this).text());
});

Если вы хотите сделать это с объектом: 

var selectors = {
    select: '#article',
    exclude: ['#inset', 'p']
};

$(selectors.select).children(':not('+selectors.exclude.join(',')+')').each(function(){
    alert($(this).text());
});

EDIT

Чтобы получить любой уровень предка, вы можете добавить дополнительные селекторы и использовать find(). Например. 

$('#article').find('li:first, :not(#inset, #inset *)').each(function(){
    alert($(this).text());
});

При этом вы исключите #inset и всех #inset предков, кроме первого li. Хотя это не совсем работает с объектом selectors, потому что вы исключаете группу элементов, а затем включаете некоторые исключенные элементы. Вы можете сделать это с тремя элементами в объекте: 

var selectors = {select: ... , exclude: ... , includeFromExcluded: ...};
...