Есть ли селектор/метод jQuery для поиска определенного родительского элемента на уровне n?

Рассмотрим следующий HTML. Если у меня есть ссылка JSON на элемент ‹button›, как я могу получить ссылку на внешний элемент ‹tr› в обоих случаях

<table id="my-table">
    <tr>
        <td>
            <button>Foo</button>
        </td>
        <td>
            <div>
                <button>Bar</button>
            </div>
        </td>
    </tr>
</table>

<script type="text/js">
    $('#table button').click(function(){
        //$(this).parent().parent() will work for the first row
        //$(this).parent().parent().parent() will work for the second row
        //is there a selector or some magic json one liner that will climb
        //the DOM tree until it hits a TR, or do I have to code this myself
        //each time?            
        //$(this).????
    });
</script>

Я знаю, что мог бы выделить каждое условие в особом случае, но меня больше интересует стиль «как бы глубоко вы ни были, карабкайтесь по дереву, пока не найдете элемент X». Что-то вроде этого, но больше похоже на jQuery/менее многословно

var climb = function(node, str_rule){
    if($(node).is(str_rule)){
        return node;
    }
    else if($(node).is('body')){
        return false;
    }
    else{
        return climb(node.parentNode, str_rule);
    }
};  

Я знаю о методе parent(expr), но из того, что я видел, это позволяет вам фильтровать родителей на один уровень выше и НЕ карабкаться по дереву, пока вы не найдете expr (я бы хотел, чтобы пример кода доказывал, что я ошибаюсь)


person Alan Storm    schedule 30.03.2009    source источник


Ответы (3)


Функция parents делает то, что вы хотите:

$(this).parents("tr:first");
person Seb    schedule 30.03.2009
comment
Абсолютно, спасибо! Вот для чего нужно разрешение на редактирование чужих сообщений ;) - person Seb; 31.03.2009
comment
Ха, смешно. Мне было интересно, почему Visual jQuery дважды перечислил parent(expr); Оказывается, я полностью расставил букву s в конце. - person Alan Storm; 31.03.2009
comment
Спасибо, Себ, я вообще не знал об этом, и это действительно полезно. Конечно, лучше, чем беспорядок 'parent().parent()....' - person Peadar; 24.07.2014

Кроме того, если вы используете jQuery 1.3+, вы можете использовать метод closest

$(this).closest("tr");
person bendewey    schedule 30.03.2009
comment
Просто хотел добавить, что closest и parents очень похожи, но имеют небольшую разницу. Вы можете прочитать больше здесь. В целом, я думаю, что метод closest более эффективен для этого конкретного сценария. - person aug; 09.07.2014
comment
хм, очень легко понять это имя функции. - person Usman Ahmed; 12.10.2017

не jQuery, но этот вариант работает намного лучше

узел.содержит(другойузел)

Метод Node.contains() возвращает логическое значение, указывающее, является ли узел потомком данного узла или нет.

https://developer.mozilla.org/en/docs/Web/API/Node/contains

person zloctb    schedule 31.01.2017