javascript - jquery 对一组元素(elements)的(方法)操作顺序?
巴扎黑
巴扎黑 2017-04-10 17:14:38
[JavaScript讨论组]

写代码的时候有时候需要用到jquery取到一组元素,比如$(".class")
然后对这组元素做一些操作比如.addClass()等操作

想问下,jquery对这组元素的操作顺序是不是顺序遍历依次对这些元素进行操作。

提这个问题是因为以前一直这么用,返回结果或者操作顺序都感觉是顺序进行的,但是当对一组元素进行.parents()的选取,返回的结果集合是倒序的
去查了下jquery -parents() 有说

When multiple DOM elements are in the original set, the resulting set will be in reverse order of the original elements as well, with duplicates removed.

大概这个方法就是这么的吧。

demo代码

p11

p12

p13

我想问的问题如下:
1 为什么上述场景中$('.p2').parents('.p1')返回的.p1 是倒序觉得很奇怪,这样设计有什么好处么,或者说api就是这么写的没什么为什么?

如上图,可以看出.parents()和.closest()返回结果顺序的差别

2 通过jquery取到一组DOM元素,然后对这些元素进行操作,一般是不是顺序依次对这组元素顺序来操作的呢?

巴扎黑
巴扎黑

全部回复(1)
PHPz

一般情况下,jquery选取 DOM 节点按顺序返回。

对于parents返回的是倒序问题,问题中给的例子不是很恰当。下面的例子能够说明问题

<p id='d1'>
    1111111111
    <p id='d2'>
        22222222222
        <p id='d3'>
            33333333333333
            <p id='d4'>
                44444444444444444444
                <a href="javascript:;"></a>
            </p>
        </p>
    </p>
</p>

js

console.log($('a').parents('p'));

返回的顺序是:d4,d3,d2,d1。等于是儿子——父亲——爷爷——曾爷爷,这样就一目了然了。


更新

一般的查询节点都是顺序存储的。最开始是这样的:

曾爷爷1——爷爷1——父亲1——儿子1 + 曾爷爷2——爷爷2——父亲2——儿子2

但是,为了形成儿子——父亲——爷爷——曾爷爷的关系顺序,parents等会把数组反转过来。不过,源代码只是简单的做了反转,没有把各条关系连分开reverse,再拼接起来。

jQuery.fn[ name ] = function( until, selector ) {
        var matched = jQuery.map( this, fn, until );

        if ( name.slice( -5 ) !== "Until" ) {
            selector = until;
        }

        if ( selector && typeof selector === "string" ) {
            matched = jQuery.filter( selector, matched );
        }

        if ( this.length > 1 ) {

            // Remove duplicates
            if ( !guaranteedUnique[ name ] ) {
                jQuery.uniqueSort( matched );
            }
            
            // 注意看这里
            // Reverse order for parents* and prev-derivatives
            if ( rparentsprev.test( name ) ) {
                matched.reverse();
            }
        }

        return this.pushStack( matched );
    };

所以,反转过来就是:

儿子2——父亲2——爷爷2——曾爷爷2 + 儿子1——父亲1——爷爷1——曾爷爷1

由于,每层关系链只有一层,于是,就是形成了儿子2-儿子1这样的顺序。这就解释了题主的疑问。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号