javascript - jQuery .html() 匿名函数返回 oldHtml

Question

小提琴：http: //jsfiddle.net/bplumb/ZnMF5/1/

这显然是我缺乏理解，但我试图运行一个匿名函数.html()来执行一些自定义代码，然后将旧的 html 字符串值返回给一个变量。它没有像我期望的那样返回 html，而是根据我使用的选择器返回一个 jQuery 对象。

var oldHtml = $('#test').html(function(index, oldHtml){
    //some custom code here
    return oldHtml;
});
console.log(oldHtml); 

我想我可以以这种方式返回 html，因为它可以在正常的函数调用中工作。

var someOtherHtml = getOldHtml();

console.log(someOtherHtml);

function getOldHtml(){
    return $('#test').html();
}

说到这个，我对 jQuery 有什么不了解的地方？

Answer 1

$(...).html(function)返回原始 jQuery 对象，而不是所选元素中的 html。

您在函数中返回的内容实际上设置为所选元素的新 html。

$(collection).html(function(){
    return "I'm the new html!";
});
// results in all elements in collection receiving the html ("I'm the new html!")
// equivalent to:
// $(collection).html("I'm the new html!");

Answer 2

var oldHtml将在技术上引用$('#test')对象。

您使用的语法将html元素的设置为oldHtml并将 jQueryObject 分配给oldHtml

Answer 3

你可以

var oldHtml = $('#test').html();
//custom code
$("#test").html(customHtml);

---

该函数返回到 jQuery 内部。考虑：

function jQueryInternal(fn) {
    var theFunctionReturned = fn();
    //do something with e.g. 3
    return 4; //This is what is separately returned to the calling code
}

同时，在完全不同的地方：

//Here are surroundings completely unaffected by the return value
jQueryInternal(function() {
    return 3; //Return 3 to the jQueryInternal function
          //it doesn't do anything to the surrounding code
});
//Here are surroundings completely unaffected by the return value

---

jQuery 内部不会忽略返回值，请参阅http://jsfiddle.net/B7Htd/

Answer 4

var cacheOldHtml = '';
$('#test').html(function(index, oldHtml){
    //some custom code here
    cacheOldHtml = oldHtml;
});

如果你想改变#test你可以做的 HTML 内容：

$('#test').html(function(index, oldHtml){
    //some custom code here
    var newHtml = oldHtml + '<div>NEW</div>';
    return newHtml;
});