JQuery выбрать потомков, включая родителя

Question

Рассмотрим следующий HTML:

<div class="foo" id="obj">
   I should be changed red
   <div class="bar" style="color:black;">
      I should not be changed red.
      <div class="foo">I should be changed red.</div>
   </div>
</div>

С учетом элемента DOM obj и выражения, как мне выбрать дочерних элементов и, возможно, obj? Я ищу что-то похожее на «выбрать потомков», но также включая родителя, если оно соответствует выражению.

var obj = $("#obj")[0];

//wrong, may include siblings of 'obj'
$(".foo", $(obj).parent()).css("color", "red");

//wrong -- excludes 'obj'
$(".foo", obj).css("color", "red");

//correct way, but it's annoying
var matches = $(".foo", obj);
if ($(obj).is(".foo")) matches = matches.add(obj);
matches.css("color", "red");

Есть ли более элегантное решение для этого?

Answer 1

Если я вас правильно понимаю:

$(currentDiv).contents().addBack('.foo').css('color','red');

Я переименовал "div" в "currentDiv" для ясности. При этом выбирается текущий элемент и все содержащиеся в нем элементы, а затем отфильтровываются те, которые не имеют класса foo, и применяется стиль к оставшейся части, то есть к тем, которые имеют класс foo.

РЕДАКТИРОВАТЬ Небольшая оптимизация

$(currentDiv).find('.foo').addBack('.foo').css('color','red');

EDIT

Этот ответ был обновлен для включения новых методов jQuery. Первоначально

$(currentDiv).find('.foo').andSelf().filter('.foo').css('color','red');

, который все еще требуется для jQuery старше 1.8

Answer 2

jQuery 1.8 представил .addBack () , который принимает селектор в пользу .andSelf (). Таким образом, код tvanfosson становится намного более эффективным, чем

$(currentDiv).find(".foo").addBack(".foo").css("color", "red");

Если у вас этого не было, я думаю, что

$(currentDiv).find(".foo").add(currentDiv.filter(".foo")).css("color", "red");

было бы довольно эффективно, если не очень красиво.

Answer 3

Ответ Эндрю был настолько полезным и самым эффективным из всех ответов (начиная с jQuery 1.8 и далее), поэтому я сделал, как предложил Сэм , и превратил его в тривиальный метод расширения jQuery для всех, чтобы использовать:

Добавочный код:

jQuery.fn.findAndSelf = function (selector){
    return this.find(selector).addBack(selector);
};

используйте так:

$(function(){
    $('#obj').findAndSelf('.foo').css('color', 'red');
});

JSFiddle: http://jsfiddle.net/BfEwK/

Полная благодарность Эндрю за предложение addBack() как лучший вариант (на эту дату). За него проголосовали соответственно и предложили всем сделать то же самое.

Answer 4

За исключением лучшего решения, я создал новую функцию и использую ее вместо $:

var _$ = function(expr, parent){ 
   return $(parent).is(expr) ? $(expr, parent).add(parent) : $(expr, parent); 
}

Answer 5

Более короткий способ выбора всех дочерних элементов, включая родительский элемент:

$('*', '#parent').addBack();

Что совпадает с:

$('#parent').find('*').addBack();

$('*', '#parent').addBack().css('border', '1px solid #f00');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <span>Child</span>
  <span>Another child</span>
</div>

Конечно, вы можете изменить универсальный селектор на нужный элемент.

$('.foo', '#parent').addBack();

или

$('#parent').find('.foo').addBack();

Answer 6

Если я не ошибаюсь, не могли бы вы просто сделать следующее?

$("#obj").css("color", "red").find(".foo").css("color", "red");

Найдите предполагаемый объект / элемент с помощью CSS, затем найдите все объекты / элементы в указанном объекте / элементе с помощью указанного селектора и затем примените CSS к значению?

Answer 7

Разве это не делает то, что вы хотите (если я не понимаю ...)

$(document).ready(function(){
    $("div.foo").css("color", "red");
});

Answer 8

 $('div.foo, div.foo > *').css('color','red');

Основная идея заключается в том, что вы можете разделять различные правила для сопоставления запятыми. Прямо как в CSS. Насколько я знаю, все здесь поддерживается jquery и может быть "ORed" через запятую.