记得前几天有人在论坛发帖问了一个关于jquery删除节点的问题 原帖是这样的（原帖的地址是：原帖）
<ul>
<li>1</li>
<li title="a">2</li>
<li>3</li>
<li>4</li>
</ul>
$("ul li:eq(1)").remove( ); // 删除了第2个，正常
$("ul li").remove("ul li:eq(1)"); // 结果只剩下第4个li 为毛啊这步
$("ul li").remove("ul li[title='a']"); // 删除了第2个，正常
这是为何？
当时我也回复了，但是当时时间太紧，没有看懂源码，这两天在看jquery的sizzle选择器引擎。然后才想起这个问题可能是jquery的bug，也有可能是出于jquery不鼓励这样的写法。
其实jquery对象调用remove方法的基本流程是这样的：对jquery中的每个dom元素调用remove方法。代码如下
在这个remove方法中重点是对jquery.filter(selector,[this]).这句话是对由当前元素组成的数组由表达式进行过滤，返回数组中都是符合selector的元素。如果过滤后数组依然不为空
jQuery.each({
// keepData is for internal use only--do not document
remove: function( selector, keepData ) {
if ( !selector || jQuery.filter( selector, [ this ] ).length ) {
if ( !keepData && this.nodeType === 1 ) {
jQuery.cleanData( this.getElementsByTagName("*") );
jQuery.cleanData( [ this ] );
}
if ( this.parentNode ) {
this.parentNode.removeChild( this );
}
}
},
，说明当前元素就是要删除的元素，则 调用this.parentNode.removeChild( this );删除此元素。逻辑上是很简单的。重点就是这个filter是怎么工作的。它的工作方式直接关系到该删除哪个元素。
抛开这些问题先不说，我们使用jquery经常使用$(“xxx”)这样的写法，这个方法就会返回我们想要的包装好地jquery元素，内部是怎么解析地呢？在jQuery1.4后关于这方面的问题已专门由一个开源项目Sizzle，Jquery在遇到上述问题是调用的Sizzle选择器引擎（Sizzle官网：sizzle官网了解更多）。Sizzle其实说白了就是一个函数函数原型为
var Sizzle = function(selector, context, results, seed)
selector就是选择字符串，context是选择执行时的上下文，如果contex为null则默认为document，Result是结果集，如果不为空则将结果附加在其后，seed就是种子集，可以理解为所有的匹配结果都是从seed中取的（即最后得到的结果集肯定是seed的子集）。
Sizzle对有伪位置选择器（）和无位置伪选择器是不同的处理顺序，如果selector匹配 /:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^-]|$)/这个正则表达式说明选择器字符中若有伪位置选择器，则selector从左至右解析，如果不是则从右往左解析。
如果是从右往左解析，我们很容易想到：在开始解析的时候就会在seed中寻找最左边的字符。挺抽象的举个例子：
“ul li[title=’a’]”为选择字符串，第三个li DOM元素为seed ，从右往左解析就会从seed中过滤不符合条件li[title=’a’]的元素，然后再过滤父元素不是ul的元素。最后得到结果，当然结果大家都知道是为空。
然而如果从左往右解析式，不可能像上面那样做，它只有一步一步从左往右解析，这样得到的最后结果是没有考虑seed的情况还是上面的seed，选择字符串替换为”ul li:eq(1)”,则jquery最后返回的结果就是第二个li元素，完全没有考虑seed给出的范围。
现在我们看上面的那个帖子，remove对每个jquery对象中的每个元素，遍历调用remove方法，如果过滤参数中含有伪位置选择调用符则jQuery.filter(selector,[this]),而此函数此时不会考虑[this]给的范围而直接返回selector选择的结果。
遍历第一个元素时调用filter（“ul li:eq(1)”，[第一个li元素]）,此时ul中是有第二个li元素的，故返回innerhtml为2的li DOM元素，此时返回结果集长度不为0，故删除第一个元素。
遍历第二个元素时调用filter（“ul li:eq(1)”，[第一个li元素]）（为什么是第一个li元素呢，因为原先第一个li因为符合条件被删了）,，此时ul中也是有第二个li元素，故返回innerhtml为3的li DOM元素 ，此时返回结果集长度不为0，故删除‘第一个’元素。
遍历第二个元素时调用filter（“ul li:eq(1)”，[第一个li元素]）（原因同上），此时ul中也是有第二个li元素，故返回innerhtml为4的li DOM元素 ，此时返回结果集长度不为0，故删除‘第一个’元素。
遍历第四个元素时调用filter（“ul li:eq(1)”，[第一个li元素]）（原因同上），此时ul下只有自己一个li元素故返回的结果集长度为零，不符合条件故不删除。
分析完了，应该明白了为什么会出现上述的奇怪现象。
那怎么让filter按照我们想的那样工作呢。其实就是修改Sizzle的源码。
其实你可能已经猜到，出现上述问题的主要原因是没有使用seed，我们可以在选择字符串从左至右解析完，对解析的结果进行遍历，看是不是seed中的元素如果不是就踢掉，这样就能返回我们以为正确的结果。
if ( parts.length === 2 && Expr.relative[ parts[0] ] ) {
set = posProcess( parts[0] + parts[1], context );
} else {
set = Expr.relative[ parts[0] ] ?
[ context ] :
Sizzle( parts.shift(), context );
while ( parts.length ) {
selector = parts.shift();
if ( Expr.relative[ selector ] ) {
selector += parts.shift();
}
set = posProcess( selector, set );
}
}
这段代码就是用来处理有伪位置选择符的选择字符串的。set就是每步的结果。
我增加的代码加在这之后
修改代码如下
if(parts.length==0&&seed){
var p_result=new Array();
var seeds=makeArray(seed);
var i;
for(i=0;i<seeds.length;i++)
{
var j;
for(j=0;j<set.length;j++){
if(seeds[i]==set[j])
p_result.push(seeds[i]);
}
}
set=p_result;
}
这样得到的set就是我们想要的结果。
我在运行上面的例子是，结果只剩下1 这个li元素，你可能已经猜到了。分析如下
遍历第一个元素时调用filter（“ul li:eq(1)”，[第一个li元素]）,此时虽然有第二个li元素，但是seed并不包含此元素。故只会但会空集合长度为0.不删除。
遍历第二个元素调用filter（“ul li:eq(1)”，[第二个li元素]）,此时ul中是有第二个li元素的，并且seed中也包含此元素，故返回的结果集长度为一，符合条件删除此元素。
遍历第三个元素时调用filter（“ul li:eq(1)”，[第二个li元素]）（因为原来的第二个元素符合条件被删了）,此时ul中是有第二个li元素的，并且seed中也包含此元素，故返回的结果集长度为一，符合条件删除此元素。
遍历第四个元素时调用filter（“ul li:eq(1)”，[第二个li元素]）（原因同上），此时ul中是有第二个li元素的，并且seed中也包含此元素，故返回的结果集长度为一，符合条件删除此元素。
故最后只剩下了1这个li元素。
综上所诉：
虽然我们修改了sizzle中的具体实现，但是得到的结果还是不符合我们预期的结果（我们预期的结果是删除第二个元素），所以思考一下这种情况也许不是jQuery的bug，或许是不提倡在remove中使用伪位置选择符。因为你在用的时候没有该清楚的它是怎么运行的。或许你说还要修改remove算法，那就没有必要了。在加了上面的代码后还是没有符合我们的预期，但是我们分析发现，这种处理是完全符合逻辑的。使我们对删除时的选择器写法产生了误解。
总之，不要在remove方法的选择符参数中含有伪位置选择符，它不是想看起来那么工作的！
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
