多个列表，点击某个li或其他元素，传递不同的值给后台

传递的值命名方式：可以字母+数字

html代码：

<div class="search-address-content">
                    <div class="search-address-title">海南 </div>
                    <ul class="search-address-list parents-item" data-name="a">
                        <li>海口0</li>
                        <li>三亚0</li>
                        <li>澄迈0</li>
                        <li>琼海0</li>
                        <li>儋州0</li>
                    </ul>
                    <div class="search-address-title">广东 </div>
                    <ul class="search-address-list parents-item" data-name="b">
                        <li>海口1</li>
                        <li>三亚1</li>
                        <li>澄迈1</li>
                        <li>琼海1</li>
                        <li>儋州1</li>
                    </ul>
                    <div class="search-address-title">广西 </div>
                    <ul class="search-address-list parents-item" data-name="c">
                        <li>海口2</li>
                        <li>三亚2</li>
                        <li>澄迈2</li>
                        <li>琼海2</li>
                        <li>儋州2</li>
                    </ul>
                </div>

js代码：


//注：给点击当前元素的父类添加.parents-item和data-name属性
function getItemValue() {
    var thisItem=$(event.target);-----得到当前点击的元素
    var thisItemIndex=thisItem.index();-----当前元素在列表中的索引值
    var thisItemAttr=thisItem.parents('.parents-item').data('name')-----获取元素对应的data-name属性值
    console.log(thisItemAttr+thisItemIndex);
}


$('.search-address-list li').on('click',function(){
    getItemValue();
});

js中用到了 html5的 data-*自定义属性，需要深入了解的请自行百度，或参考别人写的文章：https://www.cnblogs.com/dolphinX/p/3348458.html

 

控制台打印结果：