javascript - this的问题，如何获取this父元素的序号？

问题描述

问 题

html：

            <li class="time_option_li">
                <span>开始时间：</span>
                <select class="time_start_hour">
                </select>
                <select class="time_start_minutes">
                </select>
                <input type="hidden" name="time_start">
                <span style="margin-left: 1%;">截至时间：</span>
                <select class="time_end_hour">
                </select>
                <select class="time_end_minutes">
                </select>
                <input type="hidden" name="time_end">
                <span class="yellow">*</span>
                <span style="display: inline-block;color: red;">建议以30分钟或1小时为分时间隔最佳</span>
                <span style="margin-left: 1%;">库存</span>
                <input type="number" size="7" min="-1" max="999999">
                <span class="yellow">*</span>
                <span style="display: inline-block;color: red;">输入-1表示不限制库存数量</span>
                <span class="time_option_reduce" onclick="time_option_reduce()" ></span>
            </li>

<li>是动态添加的

function time_option_add() {
    //获取当前最后一个分时预约选项
    var _thisli = $('.time_option_li:last');
    //判断最多添加10个
    if (_thisli.siblings().length < 9) {
        //在当前选项后插入新的选项
        _thisli.clone(true).insertAfter(_thisli);
        //为新创建的选项添加消除事件
        // $('.time_option_li:last').children('.time_option_reduce').bind('click', removeli());

        //添加新的时间对象
        var nw_start_time = new Date(1970, 1, 1, 0, 0, 0);
        var nw_end_time = new Date(1970, 1, 1, 23, 59, 0);
        st_time.push(nw_start_time);
        ed_time.push(nw_end_time);
        console.log(st_time);
        console.log(ed_time);
    } else {
        errorMsg(['一次性最多添加10个分时预约'])
    }

};

现在每次点击 this的指向 总是输出-1

function time_option_reduce() {
    console.log($(this).parent().index()); //输出-1
    // var _thisli = $('.time_option_li:last');
    // console.log(_thisli.siblings().length);
    // if (_thisli.siblings().length == 1) {
    //     errorMsg(['至少设置1个分时预约'])
    // } else {
    //     var _thisP = $(this).parent();
    //     li_num = _thisP.index();
    //     console.log(li_num);
    //     // _thisP.slideUp(500, function() {
    //     //     _thisP.remove();
    //     // });
    // }
}

解决方案

time_option_reduce方法中的this一直指向的是window，可以修改如下

 
 <span class="time_option_reduce" onclick="time_option_reduce(this)" ></span>
 
 
 function time_option_reduce(_this) {
    console.log($(_this).parent().index());
 }

这篇关于javascript - this的问题，如何获取this父元素的序号？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！