Jquery警报不显示预期的代码

Question

我不知道我的 jQuery 代码有什么问题。对我的代码中发生的情况进行更好的解释将会有很大帮助。

当调用追加时，它显示了我期望看到的元素，但在我的警报中我只能看到 1 个单词“第一个”。

HTML

<div id="myDiv">

</div>
<input type="button" id="btn" value="append"/>

JavaScript

$('#btn').click(function() {
    var myElement = '<span id="spn1">first </span><span id="spn2">second </span><span id="spn3">third </span><span id="spn4">fourth </span>';

    var $val = $(myElement).not('#spn2');

    $('#myDiv').append($val);
    alert($val.html());

});

或者jsfiddle:http://jsfiddle.net/MCvLQ/

Answer 1

好吧，让我逐行向您解释一下。 首先，

var $val = $(myElement).not('#spn2') 

这表示您正在选择 myElement 上的所有元素，不包括 id 为 spn2 的元素。

$val now is equivalent to
--------------------------
<span id="spn1">first </span>
<span id="spn3">third </span>
<span id="spn4">fourth </span>

正如您所注意到的，上面的元素中，id 为“spn2”的元素不再存在。基本上 .not() 选择器被定义为从匹配元素集中删除元素。

然后是这个语句

$('#myDiv').append();

将 $val 的所有元素添加到 myDiv 的末尾部分。

我在 myDiv 中添加了一个预定义元素，因此您会注意到所有元素都添加在 div 的最后部分。 我还创建了一个按钮供您查看 .append() 的相反内容，即 .prepend()。这还将在 myDiv 内现有元素的顶部添加元素。

在此处查看我修改后的代码以查看差异 http://jsfiddle.net/MCvLQ/1/

最后

alert($val.html());

.html() 定义为，获取匹配元素集中第一个元素的 HTML 内容。 引用这里 http://api.jquery.com/html/

注意 $val 的最新值，因为您可以看到第一个元素是“first”，这解释了为什么您的警报仅显示单词“first”。 .html() 方法使用浏览器的innerHTML 属性。

其他信息:

除了.not()选择器之外，您还可以使用:not()选择器。引用这里http://api.jquery.com/not-selector/

对于速度问题，此测试http://jsperf.com/jquery-css3-not-vs-not说 :not() 在除 IE8 之外的大多数浏览器上都比 .not() 好得多。

但是，这仍然取决于你。哪个对您来说更具可读性。 Codewise .not() 乍一看代码更容易阅读。