Подтвердить что ты не робот

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.

Надеюсь, что это имеет смысл.

4b9b3361

Ответ 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')