Jquery 警报不显示预期的代码

Question

我不知道我的 jQuery 代码有什么问题。更好地解释我的代码中发生的事情会有很大帮助。

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

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() 乍一看代码更易于阅读。