Using .each() in JQuery to traverse elements study notes_jquery

When writing a tab today, you need to use .each() in jquery. Get the number of the li element by getting the index parameter in each() to facilitate the display of the following block. Write it on a test page Ok the following code:

Copy code The code is as follows:

         

                                                                                                                                                                                                                                                                                                          

Option 1

                                                                                                                                                                                                                                                                

Option 2

                                                                                                                                                                                                                                                              

Option 3

                                                                                                                                                                                                                                                        

Option 4

                                                  
                                                                                                 

                                         

Content 1

                                                                                                                                                                                                                                                                                                                                                                                                                         

The test results were normal. Later, when I used it on an actual page, I found that when the li list above was changed, the div blocks below did not change with different blocks. I thought it was css style and actual use. Other styles in the page conflicted. After changing all the css selectors to unique ones, I found that the problem still existed, so I judged that it should be here:

Copy code The code is as follows:

$("#title .titsh").removeClass("titsh");
$("#content .consh").removeClass("consh");
$(this).addClass("titsh");
$("#content>div:eq(" index ")").addClass("consh");

There is no problem when taking out the styles in the first and second sentences. In the third sentence, it is normal to add the css style of titsh to the current li tag. That is, the last sentence is to the div obtained through div: eq (index) Failed when adding styles to the block.

So here I am:

Copy code The code is as follows:

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

I added an alert (index) pop-up window between these two sentences. Looking at the effect, I found that the index values ​​​​of more than 10 li tags were alerted. When I thought about it, there were actually other li tags on this page. Therefore, the index value iterated by each() does not correspond to the index value of the div block below. In this way, when the li tag above changes, the div block below does not change accordingly, so I changed the js code:

Copy code The code is as follows:

Added restrictions to the selector of the li element that needs to be iterated with .each(), so that it can only find the li tag in my tab to each get the index value. The problem is solved, and I can go to sleep!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn