1

在我正在查看的示例中，我看到了一些带有 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 />or<p />并且它仍然可以正常工作。

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

4

3 回答 3

1

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

它将字符串转换为 jQuery 元素。

和写作一样，$('<div></div>')只是它更短。

于 2013-11-04T13:54:55.157 回答
1

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

于 2013-11-04T14:05:48.703 回答
1

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

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

设置文本值然后获取内存中的 HTML 值的目的是对<div>文本字符串进行 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))
);
于 2013-11-08T06:35:15.633 回答