JQuery "hasParent"
Метод JQuery "имеет" эффективно выбирает все элементы, в которых у них есть определенные потомки.
Я хочу выбрать элементы, основанные на том, что у них есть определенные предки. Я знаю о родителях ([селектор]) и родителях ([селектор]), но они выбирают родителей, а не детей с родителями.
Итак, существует ли предковый эквивалент "has"?
Примечание: У меня уже есть контекст элемента дальше по иерархии, и я буду выбирать на основе этого, поэтому я не могу выполнить запрос "сверху вниз".
Обновление
Я, очевидно, объяснил, что я очень плохо здесь, поэтому я попробую и уточню:
<ul class="x">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul class="y">
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
У меня есть объект jQuery, который уже состоит из элементов 2,3,4 и 5. Я хочу выделить те элементы, у которых есть родительский элемент с классом = x.
Надеюсь, что это имеет смысл.
Ответы
Ответ 1
Для чистого повторно используемого решения рассмотрите возможность расширения объекта jQuery.fn
с помощью специального метода, используемого для определения наличия определенного предка для любого данного элемента:
// Extend jQuery.fn with our new method
jQuery.extend( jQuery.fn, {
// Name of our method & one argument (the parent selector)
within: function( pSelector ) {
// Returns a subset of items using jQuery.filter
return this.filter(function(){
// Return truthy/falsey based on presence in parent
return $(this).closest( pSelector ).length;
});
}
});
Это приводит к новому методу $.fn.within
, который мы можем использовать для фильтрации наших результатов:
$("li").within(".x").css("background", "red");
Это выбирает все элементы списка в документе, а затем фильтрует только те, у которых .x
как предок. Поскольку это использует jQuery внутри, вы можете перейти к более сложному селектору:
$("li").within(".x, .y").css("background", "red");
Это будет фильтровать коллекцию для элементов, которые спускаются либо из .x
, либо .y
, либо в оба.
Fiddle: http://jsfiddle.net/jonathansampson/6GMN5/
Ответ 2
Если я правильно понял ваш вопрос, это сделало бы:
$.fn.hasAncestor = function(a) {
return this.filter(function() {
return !!$(this).closest(a).length;
});
};
$('.element').hasAncestor('.container').myAction();
<div class="container">
<span>
<strong class="element">strong</strong>
</span>
</div>
Ответ 3
if ( $('.foo').parents('.parentSelector').length ) { // has parent }
Ответ 4
$('body').hasParent('html') //true
$('div#myDiv').hasParent($('body')) //true
API:
$.fn.hasParent=function(e){
return !$(this).parents(e).length
}
Ответ 5
Попробуйте это
ul.myList > li > a
Этот селектор выбирает только ссылки, которые являются прямыми дочерними элементами списка, которые
в свою очередь, прямые дети элементов, которые имеют класс myList.
Ответ 6
Фактически вы можете напрямую использовать filter
(без функции вызова closest
), и она будет иметь лучшую производительность. Просто используйте селектор, который соответствует элементам, содержащимся в .x
:
$("li").filter(".x *")
это также немного отличается от решений closest
, предложенных другими, поскольку он не будет соответствовать, если сам элемент имеет данный класс, но только если он внутри - элемент с этим классом.
Если желательно совместить элемент с классом, это может быть немного изменено:
$("li").filter(".x, .x *")
$("li").filter(".x *").css("background", "red");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="x"><li>1</li><li>2</li><li>3</li></ul>
<ul class="y"><li>4</li><li>5</li><li>6</li></ul>
Ответ 7
Простым способом является следующее:
// all children of a specific parent match
$('parentSelector').children();
// All children matching a specific pattern, one level deep
$('parentSelector > childSelector');
// or
// $('parentSelector').children('childSelector');
// All children matching a specific pattern, multiple levels deep
$('parentSelector childSelector');
// or
// $('parentSelector').find('childSelector');
или вам действительно нужно что-то более сложное?
Изменить: если у вас уже есть элемент, вы можете комбинировать его с командой parent(), например:
myElement.parents('parentSelector').find('childSelector'); // Will include self
Ответ 8
object.each(function(){
element = $(this);
if(element.parent().hasClass("x")){
//do stuff
}
});
это повлияет на каждый элемент вашего объекта с родительским .x
Ответ 9
Я понимаю, что это старый вопрос, но я оставляю это здесь для будущих посетителей, которые ищут что-то подобное;
Существует метод $.contains(container, contained)
, который возвращает логическое значение.
https://api.jquery.com/jQuery.contains/
Ответ 10
Очень простой способ сделать это
$('.x').find('li')