Guide to the use of $(this).index and $.each in jQuery_jquery

In response to a certain requirement at work, an effect of switching tabs is to make different HTML changes based on the total number of content elements under each option (if the content under the tab is empty, it equals XXX, otherwise it equals XXX )

Copy code 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('li')
If(a.length alert("I am less than 0!!")
              }
           });
            function moren(){
            var moren=$(".moren").find('li')
If(moren.length==0){
alert("I'm empty~no chance")
              }
          }
})

First, declare that the header of the tab is called the header

The content of the tab is called content~

The first method that comes to mind (stupid method):

The binding adds a click event. Executed when switching the header. The header obtains the corresponding content according to its own index. After traversing to the li element under the content, the total number under the content corresponding to each header is obtained.

Because this is what was discovered after the click event, but the first element in the head was ignored. I wanted it to start executing when the browser refreshed, so I added more elements to the first element in the head. A class class is judging this class class. Finally~

Just get the effect I want. When the number==0||!==0, what I want will be executed.

But consider. Something unexpected may happen later. I don’t want it to be executed when I click. I want it to be executed for me after the browser is refreshed and loaded. So I am a newbie and I worked hard to come up with a method

Another way, I feel like this is better~:

Copy code 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('li').length
alert(b)
If(b==0){
                             $(this).append("

I was added after 0

")
            }
})
})

This method uses $.each()

It's more convenient, so far I'm getting the results I want. $.each() traverses each content element, and then gets the total number of li elements under the content itself, and then I can judge and get the effect I want