Question

这是我的代码

     <ul class="nav nav-pills ranges"  id="date_range">
          <li class="active"><a href="#" data-range='1' data-toggle="tab">Last Day</a></li>
           <li><a href="#" data-range='7'>Last Week</a></li>
           <li><a href="#" data-range='30'>Last Month</a></li>
    </ul>

和

<ul class="nav nav-pills ranges"  id="data_type">
    <li class="active"><a href="#" data-type='timeInMs' data-toggle="tab">Response</a></li>
     <li><a href="#" data-type='speed_download'>Speed Download</a></li>
     <li><a href="#" data-type='dnsTime'>DNS</a></li>
     <li><a href="#" data-type='size'>Page Size</a></li>

我想获得每个li活动的数据范围和数据类型的值

这是我的代码

$('ul.ranges a').click(function(e) {
        e.preventDefault();

        // Get the number of days from the data attribute
        days = $('ul#date_range li.active a').attr('data-range');

        data_type = $('ul#date_type li.active a').attr('data-type');         

        // Make things pretty to show which button/tab the user clicked
        el.parent().addClass('active');
        el.parent().siblings().removeClass('active');



    });

Answer 1

使用data()以及如果使用closest()，则parent()无效，如果HTML已更改，则无效。

这样做：

    $('ul.ranges a').click(function(e) {

            e.preventDefault();        

            $(this).closest("li").addClass('active');
            $(this).closest("li").siblings().removeClass('active');

            // Get the number of days from the data attribute
            var days = $('ul#date_range li.active a').data('range');

            var data_type = $('ul#data_type li.active a').data('type'); 

             console.log(days+":"+data_type)

        });

FIDDLE DEMO

Answer 2

从.active中移除$('ul#date_range li.active a')课程，因为您之前没有分配该课程

如何获得多ul列表的值

2 个答案: