Question

当我点击输入时，我正在创建一个img，然后我从创建的img中获取html或anyelse。

但我不知道为什么这不起作用！

始终返回null

我的js：

$("#click").click(function(){
    var $imgDone = $('<img/>').attr('src', 'someImage/insomewhere.jpg');
    $(this).after($imgDone);
    setTimeout(function(){
          alert($(this).next().html());
    }, 1000);
});

我mande a exp。：Demo

Answer 1

this指向setInterval中的错误位置。

您在外部作用域中的this与您在回调中获得的this不同，后者通常是window对象，因为：

setInterval(f, t)

实际上是

window.setInterval(f, t);

要解决此问题，请在外部范围内复制this：

$("#click").click(function(){
    var self = this;
    var $imgDone = $('<img/>').attr('src', 'someImage/insomewhere.jpg');
    $(this).after($imgDone);
    setTimeout(function(){
          alert($(self).next().html());
    }, 1000);
});

为提高效率，正如@ T.J. Crowder建议，你实际上可以使用jQuery构造函数来获取该副本，并节省一些对jQuery的调用：

$("#click").click(function(){
    var $this = $(this);
    var $imgDone = $('<img/>')
         .attr({src:  'someImage/insomewhere.jpg'})
         .insertAfter(this); // NB: not $this here

    setTimeout(function(){
          alert($this.next().html());
    }, 1000);
});

另一个问题是，.html()显示了代码的内部内容，而不是代码本身，而img代码没有内部内容。

似乎没有任何内置的jQuery方法返回元素的实际整个HTML。要做到这一点，您需要将您的元素放入其他内容（例如<div>），然后使用的.html() 。

这是我刚刚制作的插件，受到I found via Google的启发：

(function($) {
    $.fn.outerhtml = function() {
        return $('<div/>').append(this.clone()).html();
    };
})(jQuery);

在http://jsfiddle.net/alnitak/qaSmS/

上对您的问题进行演示

Answer 2

因为超时函数是从不同的上下文调用的，this不再适用。

$("#click").click(function(){
    var $imgDone = $('<img/>').attr('src', 'someImage/insomewhere.jpg');
    $(this).after($imgDone);
    myImg = $(this);
    setTimeout(function(){
          alert($(myImg).next().html());
    }, 1000);
});

Answer 3

“.html（）”方法获取某些内容的内容，不包括容器本身的标记。

其他答案表明在超时处理程序中使用this是正确的。但是，当您解决此问题时，警报将为空。

创建后获取html元素

3 个答案: