账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    jquery 怎么限定元素的父级
    30
    0

    问怎么限定h3,h4的父级元素呢
    比如以下情况:

    <div class="p1">
    <h3></h3>
    <h4></h4>
    </div>
    
    <div class="p2">
    <h3></h3>
    <h4></h4>
    </div>

    只需要p1的,对于p2的不执行

    jquery:

    /* 
     * blogMenu plugin 1.0   2017-09-01 by cary
     * 说明:自动根据标签(h3,h4)生成博客目录
     */
    (function ($) {
        var Menu = (function () {
            /**
             * 插件实例化部分,初始化时调用的代码可以放这里
             * @param element 传入jq对象的选择器,如 $("#J_plugin").plugin() ,其中 $("#J_plugin") 即是 element
             * @param options 插件的一些参数神马的
             * @constructor
             */
            var Plugin = function(element, options) {
                //将dom jquery对象赋值给插件,方便后续调用
                this.$element = $(element);
                //将插件的默认参数及用户定义的参数合并到一个新的obj里
                this.settings = $.extend({}, $.fn.autoMenu.defaults, typeof options === 'object' && options)
                //如果将参数设置在dom的自定义属性里,也可以这样写
                //this.settings = $.extend({}, $.fn.plugin.defaults, this.$element.data(), options);
                this.init();
            }
            /**
             * 将插件所有函数放在prototype的大对象里
             * 插件的公共方法,相当于接口函数,用于给外部调用
             * @type {{}}
             */
            Plugin.prototype = {
                init: function () {
                    var opts = this.settings;
                    //console.log(opts)
                    this.$element.html(this.createHtml());
                    this.setActive();
                    this.bindEvent(); 
                },
                createHtml: function(){
                    var that = this;
                    var opts = that.settings;
                    var width = typeof opts.width === 'number' && opts.width;
                    var padding = typeof opts.padding === 'number' && opts.padding;
                    that.$element.width(width+padding*2);
                    var html = '<ul style="padding:' + padding + 'px">';
                    var num = 0;
                    $('*').each(function(){
                        var _this = $(this);
                        if(_this.get(0).tagName == opts.levelOne.toUpperCase()){
                            _this.attr('id',num);
                            var nodetext = that.handleTxt(_this.html());
                            html += '<li name="'+ num +'"><i class="iconfont menu">&#xe613;</i><a href="#'+ num +'">'+ nodetext +'</a></li>';
                            num++;
                        }else if(_this.get(0).tagName == opts.levelTwo.toUpperCase()){
                            _this.attr('id',num);
                            var nodetext = that.handleTxt(_this.html());
                            html += '<li class="sub" name="'+ num +'"><i class="iconfont menu">&#xe613;</i><a href="#'+ num +'">'+ nodetext +'</a></li>';
                            num++;
                        }
                    })
                    html += '</ul><a href="javascript:void(0);" class="btn-box">'
                                +'<span class="icon-minus-sign"></span>'
                            +'</a>';
                    return html;   
                },
                handleTxt: function(txt){
                    //正则表达式去除HTML的标签
                    return txt.replace(/<\/?[^>]+>/g,"").trim();
                },
                setActive: function(){
                    var $el = this.$element,
                        opts = this.settings,
                        items = opts.levelOne + ',' + opts.levelTwo,
                        $items = $(items),
                        offTop = opts.offTop,
                        top = $(document).scrollTop(),
                        currentId;
                    if($(document).scrollTop()==0){
                        //初始化active
                        $el.find('li').removeClass('active').eq(0).addClass('active');
                        return;
                    }
                    $items.each(function(){
                        var m = $(this),
                            itemTop = m.offset().top;
                        if(top > itemTop-offTop){
                            currentId = m.attr('id');
                        }else{
                            return false;
                        }
                    })
                    var currentLink = $el.find('.active');
                    if(currentId && currentLink.attr('name')!= currentId){
                      currentLink.removeClass('active');
                      $el.find('[name='+currentId+']').addClass('active');
                    }  
                },
                bindEvent: function(){
                    var _this = this;
                    $(window).scroll(function(){
                        _this.setActive()
                    });
                    _this.$element.on('click','.btn-box',function(){
                        if($(this).find('span').hasClass('icon-minus-sign')){
                            $(this).find('span').removeClass('icon-minus-sign').addClass('icon-plus-sign');
                            _this.$element.find('ul').fadeOut();
                        }else{
                            $(this).find('span').removeClass('icon-plus-sign').addClass('icon-minus-sign');
                            _this.$element.find('ul').fadeIn();
                        }
                        
                    })
                }
    
            };
            return Plugin;
        })();
        /**
         * 这里是将Plugin对象 转为jq插件的形式进行调用
         * 定义一个插件 plugin
         */
        $.fn.autoMenu = function (options) {
            return this.each(function () {
                var $el = $(this),
                    menu = $el.data('autoMenu'),
                    option = $.extend({}, $.fn.autoMenu.defaults, typeof options === 'object' && options);
                if (!menu) {
                    //将实例化后的插件缓存在dom结构里(内存里)
                    $el.data('autoMenu',new Menu(this, option));
                }
                /**
                 * 如果插件的参数是一个字符串,则 调用 插件的 字符串方法。
                 * 如 $('#id').plugin('doSomething') 则实际调用的是 $('#id).plugin.doSomething();
                 */
                if ($.type(options) === 'string') menu[option]();
            });
        };
        /**
         * 插件的默认值
         */
        $.fn.autoMenu.defaults = {
            levelOne : 'h3', //一级标题
            levelTwo : 'h4',  //二级标题(暂不支持更多级)
            width : 160, //容器宽度
            padding: 10, //内部间距
            offTop : 120, //滚动切换导航时离顶部的距离
        };
        /**
         * 优雅处: 通过data-xxx 的方式 实例化插件。
         * 这样的话 在页面上就不需要显示调用了。
         * 可以查看bootstrap 里面的JS插件写法
         */
        $(function () {
            if($('[data-autoMenu]').length>0){
                new Menu($('[data-autoMenu]'));
            }     
        });
    })(jQuery);
    1
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 溃烂模样 普通会员 1楼

      在jQuery中,你可以使用parent()方法来限定元素的父级。这个方法会返回元素的父元素,如果元素没有父元素,它会返回null

      例如,如果你有一个元素div,你可以这样使用parent()方法来限定它的父级:

      javascript div.parent(); // 输出:div

      这将返回div元素的父元素,即div元素本身。

      如果你想要限定元素的父级的特定子元素,你可以使用parentUntil()方法。这个方法会返回元素的父元素的祖先元素,如果元素没有父元素,它会返回null

      例如,如果你有一个元素div,并且你想要限定它的父级的所有的父元素的祖先元素,你可以这样使用parentUntil()方法:

      javascript div.parentUntil('.parent'); // 输出:div

      这将返回div元素的父级的所有的父元素的祖先元素,即div元素的父级的所有父元素。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部