Метод jQuery parent() не работает

Question

Почему метод parent() в JQuery не работает в следующем случае?

$('.class')[0].parent(); 

Ошибка: Uncaught TypeError: undefined is not a function

, но если я использую:

$('.class').parent(); 

это работает, и дать мне все родители всех элементов с классом class. Я знаю, как сделать это в jQuery, но вопрос в том, почему браузер интерпретирует его как код JavaScript, а не как код jQuery, когда я использую [0].

Answer 1

Это потому, что $('.class')[0] получает доступ к элементу DOM в jQuery object ,

Native DOM elements не имеют методов jQuery, то есть почему вы получаете сообщение об ошибке.

Вы можете использовать .eq() method для доступа к нему по его индексу:

$('.class').eq(0).parent(); 

В качестве альтернативы, вы можете обернуть элемент DOM $('.class')[0] с $(), чтобы преобразовать его в объект JQuery:

$($('.class')[0]).parent(); 

(Используйте вместо этого метод .eq().)

Answer 2

Метод .parent() отлично подходит для объектов jQuery. Ваша проблема в том, что вы пытаетесь использовать его с чем-то, что не является объектом jQuery.

Когда вы извлекаете элементы из объекта jQuery с нотной записью [ ], вы получаете ссылки на исходный узел узла DOM. У них нет метода parent().

Вы можете использовать метод .eq() JQuery, чтобы ограничить набор элементов, участвующих в первой согласованной, или просто добавить :first к селектору:

$('.class:first').parent(); 

Answer 3

console.log($('.class').first().parent().html()); 
 

 
//or 
 

 
console.log($('.class').eq(0).parent().html()); 
 
console.log($('.class').eq(1).parent().html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent1"> 
 
    <div class="class"> 
 
    1 
 
    </div> 
 
    </div> 
 

 
<div class="parent2"> 
 
    <div class="class"> 
 
    2 
 
    </div> 
 
    </div>