Разница между методами доступа к узлу в Javascript/jQuery

Question

У меня возникает небольшая путаница в отношении того, как точно работают селекторы в Javascript/jQuery. У меня есть два метода, называемые почти одинаковыми способами, которые, кажется, возвращают разные селекторы, и я не могу сказать, почему.

if (document.URL.indexOf("search?s=") !== -1){ 
    updateOldSearch(); 
} else { 
    $("li a:contains('Search')").bind("click", replaceWithSearch); 
} 

Все отлично работает в другое заявление здесь:

function replaceWithSearch(){ 
    this.parentNode.replaceChild(searchWrapper, this); //Works fine 
} 

Но когда я к нему доступ в то, что мне кажется, чтобы быть идентичным образом (ясно, что это на самом деле не идентичны) она нарушает

function updateOldSearch(){ 
    var courseTab = $("li a:contains('Search')"); 
    courseTab.parentNode.replaceChild(newBox, courseTab); //parentNode is undefined 
} 

Любые объяснения относительно того, что происходит за кулисами здесь? Есть ли автоматическое кастинг, который jQuery делает, что я злоупотребляю?

Answer 1

В первом примере this представляет собой собственный узел DOM. Во втором случае courseTab представляет объект jQuery.

Попробуйте для второго примера:

function updateOldSearch(){ 
    var courseTab = $("li a:contains('Search')").get(0); 
    courseTab.parentNode.replaceChild(newBox, courseTab); 
} 

Answer 2

Есть некоторые автоматические отливка, что JQuery делает?

Kinda. Ваш прослушиватель событий работает, потому что jQuery calls it so that «это ключевое слово - ссылка на элемент, в котором доставляется событие». Обратите внимание на «элемент», а не на «коллекцию jQuery».

В отличие от этого переменная courseTab содержит экземпляр jQuery (вместо простого узла DOM). Используйте

$("li a:contains('Search')").each(function() { 
    this.parentNode.replaceChild(newBox, this); 
}); 

или

$("li a:contains('Search')").replaceWith(newBox);