Родительский и ближайший

Почему это работает:

$('.button_30').click(function(){
    $(this).closest('.portlet').find('.portlet_content').text("foo");
});

почему это не работает:

$('.button_30').click(function(){
    $(this).parent('.portlet').find('.portlet_content').text("foo");
});

где html выглядит примерно так:

<div class="portlet portlet_30">

    <div class="portlet_header portlet_header_30">
        header content here
    </div>

    <div class="portlet_sub_header portlet_sub_header_30">
        <input type="text" class="textbox_30" />
    </div>

    <div class="portlet_content portlet_content_30">
        results go here
    </div>

    <div class="portlet_footer portlet_footer_30">
        <input type="button" class="button_30" />
    </div>

</div>

<div class="portlet portlet_30">

    <div class="portlet_header portlet_header_30">
        header content here
    </div>

    <div class="portlet_sub_header portlet_sub_header_30">
        <input type="text" class="textbox_30 />
    </div>

    <div class="portlet_content portlet_content_30">
        results go here
    </div>

    <div class="portlet_footer portlet_footer_30">
        <input type="button" class="button_30" />
    </div>

</div>

Ответы

Ответ 1

Потому что parent() вернет родительский (непосредственный предок) только, если он соответствует указанному селектору.

Однако closest() будет искать всех предков и возвращать first, который соответствует селектору.

Поскольку родительский элемент button_30 является div, родителем которого является div с классом portlet, функция parent() не соответствует ему и возвращает пустой набор, где-as closest() соответствует.

Для завершения набора подобных методов здесь вы parents(), который похож на closest(), но не останавливается на первом совпадающем элементе; он возвращает всех предков, которые соответствуют селектору.

Ответ 2

.parent() смотрит только на ближайшего предка.
.closest() смотрит на всех предков, а также на исходный элемент и возвращает первое совпадение.
.parents() смотрит на всех предков и возвращает все соответствия.

Ответ 3

parent() выглядит только на одном уровне, вы можете попробовать parents() для поиска по всему пути

$('.button_30').click(function(){
    $(this).parents('.portlet').find('.portlet_content').text("foo");
});

вы можете увидеть документацию

Ответ 4

Метод closest ^{[API Ref]} пересекает дерево предков, насколько ему нужно идти для поиска соответствия выбора.

Метод parent ^{[API Ref]} предназначен только для прямого родителя.

Ответ 5

Метод parent проверяет только один уровень на цепочку элементов, а closest будет проверять список родителей до тех пор, пока не будет найдено совпадение (или был достигнут тэг html). Эквивалент:

$('.button_30').click(function(){
    $(this).parents('.portlet:eq(0)').find('.portlet_content').text("foo");
});

Ответ 6

Поскольку единственными элементами, которые соответствуют .portlet, являются бабушки и дедушки, а не родители элементов, на которые связано событие

Ответ 7

Поскольку во втором селекторе вы ищете родителя, и эта функция переместится в DOM к отцу node, но только one level, который содержит класс portlet_footer portlet_footer_30, а не те классы, которые вы проходите для селектора .portlet для работы с parent вам нужно переместить два уровня другими словами.

each time that you're using parent you move one node up