带有 <html-tag> 的 Jquery 选择器答案

【问题标题】：Jquery selectors with <html-tag>带有 <html-tag> 的 Jquery 选择器
【发布时间】：2013-11-04 13:52:33
【问题描述】：

在我正在查看的示例中，我看到了一些带有 html-tag 选择器的 jquery 代码。

做什么

var variable = '';    
$('<div />').text(variable).html()

是什么意思？我的意思是，我很好奇 <div /> 部分作为选择器。谁能解释一下？

编辑：HTML 页面内部没有和 div。

Edit2：完整代码是

<ul id="discussion"></ul>

<script type="text/javascript">
        var encodedName = $('<div />').text(name).html();
        var encodedMsg = $('<div />').text(message).html();

        $('#discussion').append('<li><strong>' + encodedName
            + '</strong>:' + encodedMsg + '</li>');
</script>

当我渲染页面时，我只看到 ul 标签内的 li 标签。没有 div。那是我的困惑。 <div /> 是否用于任何 html 标记？我的意思是，我将其更改为 <a /> 或 <p /> 仍然可以使用。

很抱歉第一次没有把问题写得更清楚。

【问题讨论】：

Correct closing tag in jQuery selector的可能重复
或者你是在问为什么用 HTML 代替选择器？见api.jquery.com/jQuery/#jQuery2
我非常讨厌 jQuery 重载 $ 的方式来表示这么多完全不同的东西，具体取决于你给出的参数。
我更新了问题，请查看最后的编辑。我看到了@Quentin 添加到问题中的那个问题，但它没有回答我的问题。

标签： jquery jquery-selectors tags

【解决方案1】：

它会创建一个 div 元素，但不会将它添加到 DOM。由于它没有存储到变量中，因此该脚本毫无用处。 .text(variable).html() 部分也没有意义：它将 div 的内容设置为空字符串，然后返回 div 的内容。

【讨论】：

是的，那么我们可以说 div 用作任何 HTML 标记只是为了获取它的内容。对？如果我是对的，那这就是我想听到的:)
确实如此，但是当您不将元素添加到页面时创建元素是没有意义的。为什么不使用 javascript 变量或对象呢？再说一次，在这个脚本中，元素没有存储到变量中，所以它可能会在创建后立即被销毁。
这就是我的想法。正如我所说，该代码块是我正在查看的示例的一部分（SignalR chathub 示例）。这就是为什么我很困惑。感谢您为我澄清这一点:)

【解决方案2】：

在这种情况下，它不是选择器。

它将一个字符串变成一个 jQuery 元素。

与写$('<div></div>') 相同，只是它更短。

【讨论】：

我刚刚添加了一个编辑注释。当代码运行时，它也不显示任何 div。让我写剩下的代码。只需一分钟。
为什么它会显示任何东西？它正在创建一个 div。将其文本值设置为某物。获取它的 html 值。然后什么都不做。
当您可以将变量用作 li 标签中的文本值时，创建 div 并设置其文本值并获取 html 的逻辑是什么？我再说一遍，渲染的代码没有显示任何 div，它只是 li 标签中的文本。

【解决方案3】：

正如其他人所指出的，这不是一个选择器，而是动态创建一个不属于当前文档的 HTML 元素。

但是 - 还没有人解释它实际上在做什么。

设置文本值然后获取内存中<div> 的HTML 值的目的是对文本字符串进行html 编码。这在您使用空字符串的原始问题中没有多大意义，但请考虑以下示例：

var variable = 'This & That < 5'; // a text value with special characters

var x = $('<div />'); // creates an ad-hoc div element in memory

x.text(variable); // sets the text contained within the DIV
                  // to 'This & That < 5'. This is the actual literal
                  // text that would be displayed if the element was
                  // displayed in a browser.

var encoded = x.html(); // gets the HTML representation of
                        // the contents of the div

alert(encoded); // shows "This &amp; That &lt; 5"

现在您已经了解发生了什么，我应该指出，构建这样的 HTML 字符串不是解决此问题的最佳方法。相反，构建您实际需要的元素更有意义，如下所示：

// a name and message from somewhere - you don't show where
// these values from in your code above.
var name = "Bob O'Conner";
var message = "Hi, welcome to my <website>.";

var newItem = $('<li />').text(':' + message);
var newTitle = $('<strong />').text(name);
newItem.prepend(newTitle);
$('#discussion').append(newItem);

或者更短的版本，像这样：

$('#discussion').append(
    $('<li />').text(':' + message).prepend($('<strong />').text(name))
);

【讨论】：