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

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

WBOY

Release： 2016-05-16 16:32:02

Original

1220 people have browsed it

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:

tab

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!