Question

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
var newvalue = '<img class="youtube_replace youtube_canvas" data-code="Wn-_MyJV37E" src="http://img.youtube.com/vi/Wn-_MyJV37E/0.jpg" />';

var abc = $('<div>' + newvalue + '</div>').find('*').each(function() {
}).html();

alert(abc);

</script>

我希望abc等于“newvalue”。但在我目前的代码中，abc是空的。为什么呢？

这是我真正想做的事情，但是出于示例目的，我在上面留下了这个空白：

var whitelist = ['a','div','img', 'span'];
var abc = $('<div>' + newvalue + '</div>').find('*').each(function() {
    if($.inArray(this.nodeName.toLowerCase(), whitelist)==-1) {
        $(this).remove();
     }
}).html(); //abc is now sanitized!!!

Answer 1

打破它：

var abc = $('<div>' + newvalue + '</div>') //Creates a div with an img element inside it
         .find('*')   //retrieves the img element
         .each(function() {}) //iterates over the jQuery set (only one img element)
         .html();  //returns the HTML serialization of the img element
                   //which has no contents, so it is an empty string

您可以拨打.parent().html()，这将检索您创建的div的内容。

在你的第二个例子中，你需要.end().html()来弹出内部jQuery堆栈并让你回到最顶层的div。

Answer 2

这样做（如果你坚持要获得刚生成的元素的HTML）：

var abc = $('<div>' + newvalue + '</div>').html();

问题在于不正确混合不同的jQuery函数和回调。

修改

您遇到的问题是find('*') <img>您在<img>内检索了所有<div>代码（实际上是：<img>个代码），但var abc = $('<div>' + newvalue + '</div>').find('*').each(function() { /* your JS code here */ }).parent().html();代码里面没有HTML （里面没有其他标签）。

如果您将代码缩短为：

<img>

您实际上会收到整个{{1}}代码的HTML。

Answer 3

这里的问题是：当你这样做时：

var abc = $('<div>' + newvalue + '</div>').find('*')

您的jQuery对象包含img元素，而不是div元素。因此，当您调用.html()时，您将获得图像的内部HTML - 这当然不存在。

var abc = $('<div>' + newvalue + '</div>')
    .find('*')
    .each(function() {
        // stuff
    })
    .parent().html();

（但@Dennis首先到达那里:)。）

为什么这个JQuery代码什么都没有返回？

3 个答案: