Home > Others

Use in jquery. each () traversal element Learning notes _jquery

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

When you write a tab today, you need to use the. each () in jquery to get the number of the Li element by getting the index parameter in each () to facilitate the following block display, with the following code written on a test page:

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<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 0px;}
#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>
<body>
<div id= "tab" >
<div id= "title" >
<ul>
<li class= "titsh" > Option one </li>
<li> option two </li>
<li> option three </li>
<li> option Four </li>
</ul>
</div>
<div id= "Content" >
<div class= "Consh" > Content one </div>
<div> Content Two </div>
<div> Content Three </div>
<div> Content Four </div>
</div>
</div>
</body>

The result of the test is normal, later in an actual use of the page used, found above the Li list changes, the following Div block does not follow the changes in the block, the CSS style and the actual use of the other styles of the page conflict, the CSS selector all changed to unique after, The discovery is still the question, so the judgment should be here:

Copy Code code as follows:

$ ("#title. Titsh"). Removeclass ("Titsh");
$ ("#content. Consh"). Removeclass ("Consh");
$ (this). addclass ("Titsh");
$ ("#content >div:eq (" +index+ ")"). AddClass ("Consh");

The first sentence, the second sentence out of the style, no problem, the third Bureau to the current Li tag plus titsh CSS style is also normal, is the last sentence to get through Div:eq (index) to obtain the DIV block add style when the failure.

So I was:

Copy Code code as follows:

$ ("Li"). each (function (index) {
$ (this). MouseOver (function () {

There is an alert (index) window between these two sentences, look at the effect, found that there are 10 of several Li tags index value is alert out, a thought that the original actual page there are other Li tags, so that each () iteration of the index value and the following Div block index value does not correspond, So above the LI tag changes, the following Div block will not follow the change, so I changed the JS code:

Copy Code code as follows:

<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>

The selector of the LI element to use. Each () is added with restrictions so that he can only find the LI tag in my tab to each of the index values, solve the problem, you can sleep!

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More