0

我对 Javascript/jQuery 中的选择器究竟是如何工作的有些困惑。我有两种以几乎相同的方式调用的方法，它们似乎返回不同的选择器，我不太清楚为什么。

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

在这里的 else 语句中一切正常：

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 自动转换？

4

2 回答 2

3

在第一个示例中，this表示本机 DOM 节点。在第二个中，courseTab表示一个 jQuery 对象。

试试这个第二个例子：

function updateOldSearch(){
    var courseTab = $("li a:contains('Search')").get(0);
    courseTab.parentNode.replaceChild(newBox, courseTab);
}
于 2013-07-15T18:41:40.227 回答
2

jQuery是否有一些自动转换？

有点。您的事件侦听器有效，因为jQuery 调用它以便“ this 关键字是对传递事件的元素的引用”。注意“元素”，而不是“jQuery 集合”。

相反，您的courseTab变量包含一个 jQuery 实例（而不是一个普通的 DOM 节点）。利用

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

或者

$("li a:contains('Search')").replaceWith(newBox);
于 2013-07-15T18:44:03.580 回答