如何解决jQuery 使用 $(this) 作为 setInterval/setTimeOut 函数内的起点遍历 DOM?
我一直试图了解如何(在 jQuery 中)使用 $(this) 作为 setInterval/setTimeOut 函数内的起点遍历 DOM,并且遇到了一些我发现令人困惑的行为。
在 setInterval/setTimeOut 函数中使用 $(this) 作为起点来遍历 DOM 似乎是不可能的
这是为什么?
jQuery/javaScript 人员 - 继续。
演示行为的示例代码:
jQuery:
// set this code anywhere (inside/outside - document.ready/named-function/...) and run it
var autoTimer = setInterval(function(){
// INSERT EXAMPLE TEST-CODE FROM BELOW HERE
},10000)
尝试过的测试代码:
// from inside the setInterval/setTimeOut function above
// if $(this)
if($(this).length !== 0) {
alert('hello');
} // alerts hello
// from inside the setInterval/setTimeOut function above
// if html-tag (body/head/html)
if($('body').length !== 0) {
alert('hello');
} // alerts hello
// from inside the setInterval/setTimeOut function above
// if className
if($('.className').length !== 0) {
alert('hello');
} // alerts hello
// from inside the setInterval/setTimeOut function above
// if id
if($('#id').length !== 0) {
alert('hello');
} // alerts hello
因此它可以很好地找到文档中的特定元素,除了 $(this) 之外,您还可以从那里遍历 DOM
即。
// from inside the setInterval/setTimeOut function above
if ($('.className').find(something).length !== 0)... // works just fine
当你想使用 $(this) 作为遍历的起点时,问题就来了
尝试使用 $(this) 作为起点遍历测试代码:
// from inside the setInterval/setTimeOut function above
// traversing up the DOM
if($(this).parents('body').length !== 0) {
alert('hello');
} // no alert (same with closest/parentsUntil/etc up the DOM)
// from inside the setInterval/setTimeOut function above
// traversing sideways in the DOM
if($(this).siblings('body').length !== 0) {
alert('hello');
} // no alert (same with next/prev/etc sideways in the DOM)
// from inside the setInterval/setTimeOut function above
// traversing down the DOM
if($(this).find('body').length !== 0) {
alert('hello');
} // no alert (same with children down the DOM)
所以从 $(this) 'body'(或其他任何东西)开始似乎不存在任何地方(向上/向下/横向),从上面的任何其他起点来看都是不正确的
我还尝试使用命名的全局函数,如:
// set outside/inside document.ready
function testCode() {
// INSERT EXAMPLE TRAVERSING TEST-CODE FROM ABOVE HERE
}
// set this code anywhere (inside/outside - document.ready/named-function/...) and run it
var autoTimer = setInterval(testCode,10000) // no alert
// set this code anywhere (inside/outside - document.ready/named-function/...) and run it
var autoTimer = setInterval(function(){
testCode();
},10000) // no alert
再次重申我的问题:
为什么在 jQuery 中使用 $(this) 作为起点在 setInterval/setTimeOut 中遍历 DOM(向上/向下/横向)似乎是不可能的?
什么是可能的黑客/解决方法/等。对于这种行为?
this answer 使用 $.proxy 仅在您使用旧版本的 jQuery 时才有效 - 但由于 as this document attests 'This API has been deprecated in jQuery 3.3'... 目前这不是一个解决方案。
bind 方法也不是,因为文档证明“从 jQuery 3.0 开始,.bind() 已被弃用”并被 on 方法取代(但我看不到我将如何在这里使用 .on() 来达到任何效果 - 但也许这只是因为我缺乏想象力)。
解决方法
这是一个基本的 this
范围问题,与 jQuery 关系不大。
最直接的方法是将 this
分配给回调外部的另一个变量:
var that = this;
setInterval(function () {
$(that).parents();
},1000);
如果你不关心 IE,或者如果你有一个构建过程,你可以使用箭头函数,它使用 this
来自它之外的范围:
setInterval(() => {
$(this).parents();
},1000);
我个人的偏好是完全避免使用 this
,因为它所有让您感到非常悲伤的愚蠢行为。从您的示例中不清楚您的 this
值来自何处,但您可以通过以下方式避免它:
// inside .each()
$('a').each(function (_,el) {
$(el).parents();
});
// inside event handler
$('a').on('click',function (event) {
$(event.target).parents();
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。