前端的一些基础

    <div class="price-box">
        <ul>
            <li id="single-month" class="active" >
                <h4 class="level">A</h4>
                <span class="price">
                <em>¥<strong>36</strong> </em>
                <del>¥72</del>
                <span class="mark "></span>
            </span>
            </li>
            <li id="singleProvince" class="singleProvince ">
                <h4 class="level">B</h4>
                <span class="price">
                <em>¥<strong>199</strong> </em>
                <del>¥498</del>
            </span>
            </li>
            <li class="zc1"  >
                <h4 class="level">C</h4>
                <span class="price">
                <em>¥<strong>399</strong></em>
                <del>￥2660</del>
            </span>
            </li>
        </ul>
    </div>

div的效果大概就是这样，当然其中省去了很多别的内容，本文的目的只是演示，展示如何获取各个层级的内容，我只是个前端的小学生，记录下也方便以后遇到类似的功能可以拿来参考

$(function () {
    $('.price-box>ul').on('click','li',function () {/*表示点击li标签触发的事件*/
        $(this).addClass('active').siblings().removeClass('active');/*表示当前节点添加高亮并且兄弟姐妹节点移除高亮，
        效果就是点击哪一个图标就是哪一个图标就高亮，siblings解释就是兄弟姐妹*/
        var index= $(this).index();/*获取当前li标签是第几个，0,1,2,3.....*/
        var dataId = $(this).attr('id');/*获取当前li标签的属性值，比如id，name，class.....*/
    });
});
/*对li进行遍历，可加参数i，代表是第几个，从0开始*/
$('.price-box ul li').each(function (i) {
	if(i==1){
	  //各种业务代码,比如 $(this).addClass('active'); removeClass等
	}
})