Home > Developer > JavaScript
Use. each () in JQuery to traverse the learning notes of elements, jquery. each
When writing a tab today, you need to use. each (): Obtain the ID of the li element by obtaining the index parameter in each (). This facilitates the display of the following blocks. The following code is written on a test page:
Copy codeThe Code is as follows:
<! 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 </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 1 </li>
<Li> Option 2 </li>
<Li> Option 3 </li>
<Li> Option 4 </li>
</Ul>
</Div>
<Div id = "content">
<Div class = "consh"> content 1 </div>
<Div> content 2 </div>
<Div> content 3 </div>
<Div> content 4 </div>
</Div>
</Div>
</Body>
</Html>
The test result is normal. Later, when I used it on an actual page and found that the above li list was changed, the following div blocks do not change with different blocks, I thought it was a conflict between the css style and other styles on the actually used page. After I changed all the css selectors to unique ones, I found that this problem still exists. So I decided it should be here:
Copy codeThe Code is as follows:
$ ("# Title. titsh"). removeClass ("titsh ");
$ ("# Content. consh"). removeClass ("consh ");
$ (This). addClass ("titsh ");
$ ("# Content> div: eq (" + index + ")"). addClass ("consh ");
First, when the second sentence is used to retrieve the style, there is no problem. In the third case, it is also normal to add the titsh css style to the current li label, that is, the last sentence is to pass div: eq (index) failed to add the style to the obtained div block.
So I am:
Copy codeThe Code is as follows:
$ ("Li"). each (function (index ){
$ (This). mouseover (function (){
An alert (index) pop-up window is added between the two sentences to check the effect. It is found that the index values of more than 10 li tags are listed by alert, I think there are other li tags in the page, so the index value obtained by each () does not match the index value of the div block below. When the li tag above changes, the following div block does not change, so I changed the js Code:
Copy codeThe Code is 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 Used for. each () iteration adds a limit so that he can only find the li tag in my tab to get the index value of each. The problem is solved and he can go to bed!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
