$ (This). index and $. each in jQuery User Guide _ jquery

This article mainly introduces $ (this) in jQuery ). index and $. for more information about how to use each and how to use the environment, refer to the following section to respond to a requirement and switch the effect of tabs, varies html based on the total number of content elements under each option (if the content under the tab is empty, it is equal to XXX; otherwise, it is XXX)

The Code is as follows:

$ (Function (){
$ (". Bao"). hide ();
$ (". Bao"). eq (0). show ();
$ (". Head li"). click (function (){
$ (This). addClass ('cur'). siblings (). removeClass ("cur ");
$ (". Bao"). eq ($ (this). index (). show (). siblings (". bao"). hide ()
Var a = $ (". bao"). eq ($ (this). index (). find ('lil ')
If (a. length <0 ){
Alert ("I'm less than 0 !! ")
}
});
Function moren (){
Var moren = $ (". moren"). find ('lil ')
If (moren. length = 0 ){
Alert ("I am empty ~ No drama ")
}
}
})

Declare the tab header first.

The content of the tab is called content ~

The first method (stupid method ):

Added a click event. When switching the header, execute the command. The header obtains the corresponding content based on its own index. After traversing the li element under the content, the total number of contents corresponding to each header is obtained.

Because it was found after the click event, but the first element in the header is ignored. I want it to start executing when refreshing the browser, so I added a class to the first element of the header to judge this class. Last ~

To get the desired effect. When the number = 0 |! When = 0, execute what I want.

But considering that. There may be things that I don't expect in the future. I don't want it to be executed when I click it. I want to execute it for me after refreshing the browser and loading it. So I tried to come up with a method.

Another method is better ~ :

The Code is as follows:

$ (Function (){
$ (". Bao"). hide ();
$ (". Bao"). eq (0). show ();
$ (". Head li"). click (function (){
$ (This). addClass ('cur'). siblings (). removeClass ("cur ");
$ (". Bao"). eq ($ (this). index (). show (). siblings (". bao"). hide ()
});
Var aaa = $ (". bao ul ")
Aaa. each (function (){
Var B = $ (this). children ('lil'). length
Alert (B)
If (B = 0 ){
$ (This). append ("

I added it after 0.

")
}
})
})

This method uses $. each ()

It is more convenient. At present, I want to get the results. $. Each () traverses each content element and obtains the desired effect after obtaining the total number of li elements under the content itself.