$ (This). index and $. each user guide in jQuery, jquery. index

$ (This). index and $. each user guide in jQuery, jquery. index

Respond to a requirement in the work, switch the effect of a tab, and make different html changes based on the total number of content elements under each option (if the content under the tab is blank, It is equal to XXX, otherwise, XXX is used)
 
Copy codeThe 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 ~ :
 
Copy codeThe 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 ("<div> I added it after 0 </div> ")
}
})
})

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.