JQuery USES. Each of traverses elements to learn notes

2020-03-30 04:17:31
OfStack

Today, when I wrote a TAB, I needed to use jquery. Each (). I got the number of li element by getting the index parameter in each(), so that the following block can be displayed.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

    <title>tab TAB </title>

    <style type="text/css">

        ul,li{list-style: none;margin: 0px; padding: 0px;}

        li{float: left;width: 80px; height: 30px; background-color: #ccc; border: 2px solid #fff;text-align:center; line-height:30px;}

        #content{clear:left; width:336px; height: 180px; background-color: #999; color:white;}

        #content div{display: none}

        #content .consh{display: block;}

        #title .titsh{background-color: #999;border:2px solid #999; color:#fff}

    </style>

    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">

        $(function(){

            $("li").each(function(index){

                $(this).mouseover(function(){

                    $("#title .titsh").removeClass("titsh");

                    $("#content .consh").removeClass("consh");

                    $(this).addClass("titsh");

                    $("#content>div:eq("+index+")").addClass("consh");

                })

            })                

        })

    </script>

</head>

<body>

    <div id="tab">

        <div id="title">

            <ul>

                <li class="titsh"> Option a </li>

                <li> Option 2 </li>

                <li> Option three </li>

                <li> Four options </li>

            </ul>

        </div>

        <div id="content">

            <div class="consh"> Content of a </div>

            <div> Content of the two </div>

            <div> Content of the three </div>

            <div> Content of the four </div>

    </div>

</div>

</body>

</html>

Test results are normal, and later used in a practical use of the page, found that changes in the above list of li, of the following div block does not follow different blocks, thought is the CSS style in the page and the actual use the style of the other conflicts, after all CSS selectors into a unique, found that the problem is, so judgment is supposed to be here:



$("#title .titsh").removeClass("titsh");

$("#content .consh").removeClass("consh");

$(this).addClass("titsh");

$("#content>div:eq("+index+")").addClass("consh");

The CSS style of adding titsh to the current li tag in the third game is also normal, but the last sentence failed to add style to the div block obtained by div: eq (index).

So I was at:



$("li").each(function(index){

$(this).mouseover(function(){

Between these two sentences with an alert pop-up window (index), see the effect, found that 10 a few li tag index values were alert, thought originally this page and other actual li tags, so lead to the each () iteration of index and the index value corresponding div block below, li, labels such changes, the following div block does not follow changed, so I will change the js code:



<script type="text/javascript">

    $(function(){

          $("#title ul li").each(function(index){

            $(this).click(function(){

              $("#title .titsh").removeClass("titsh");

              $("#content .consh").removeClass("consh");

              $(this).addClass("titsh");

              $("#content > div:eq("+index+")").addClass("consh");

            })

          })                

        })

</script>

Put a limit on the selector of the li element to use to iterate over. Each (), so he can only find the li TAB on my TAB to find the index value of each. Problem solved, sleep!