Count number of li element and addclass2019 Community Moderator ElectionValidate decimal numbers in JavaScript - IsNumeric()How to efficiently count the number of keys/properties of an object in JavaScript?How do I detect a click outside an element?How do I check if an element is hidden in jQuery?Retrieve the position (X,Y) of an HTML elementCreating a div element in jQueryHow to move an element into another element?Click through div to underlying elementsHow do I remove a particular element from an array in JavaScript?jQuery scroll to element

What would be the most expensive material to an intergalactic society?

Is divide-by-zero a security vulnerability?

I reported the illegal activity of my boss to his boss. My boss found out. Now I am being punished. What should I do?

Power Strip for Europe

Why does cron require MTA for logging?

In the late 1940’s to early 1950’s what technology was available that could melt a LOT of ice?

Haman going to the second feast dirty

Why does liquid water form when we exhale on a mirror?

Windows Server Datacenter Edition - Unlimited Virtual Machines

Are all players supposed to be able to see each others' character sheets?

What is better: yes / no radio, or simple checkbox?

How to check whether module is loaded with custom configurations?

Why does Central Limit Theorem break down in my simulation?

Conservation of Mass and Energy

Vocabulary for giving just numbers, not a full answer

Outlet with 3 sets of wires

Specifying a starting column with colortbl package and xcolor

Do items de-spawn?

Are small insurances worth it?

Doesn't allowing a user mode program to access kernel space memory and execute the IN and OUT instructions defeat the purpose of having CPU modes?

Drawing close together horizontal lines in Latex

How to draw dashed arc of a circle behind pyramid?

What stops an assembly program from crashing the operating system?

What do *foreign films* mean for an American?



Count number of li element and addclass



2019 Community Moderator ElectionValidate decimal numbers in JavaScript - IsNumeric()How to efficiently count the number of keys/properties of an object in JavaScript?How do I detect a click outside an element?How do I check if an element is hidden in jQuery?Retrieve the position (X,Y) of an HTML elementCreating a div element in jQueryHow to move an element into another element?Click through div to underlying elementsHow do I remove a particular element from an array in JavaScript?jQuery scroll to element










6















I am trying to count LI elements, and addclass to another div.



For example, 






$('.box2').addClass(function()
 return 'list' + $(this).find('.box1 li').length;
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="box1">
 <li>a</li>
 <li>b</li>
 <li>c</li>
</ul>


<div class="box2">text</div>





This should be like this 



<div class="box2 list3">text</div>


But I don't know why when I check on the DOM code,



<div class="box2 list0">text</div>


I get this result.



What do I need to fix the code?
Please help.






javascript html css







share|improve this question

















  • 1





    Your $(this) is not pointing to .box2 as you expect

    – Mr. Alien
    1 hour ago











  • @Mr.Alien It is what it actually does, pointing to .box2, hence not working as expected as there is no .box1 after it.

    – LGSon
    53 mins ago












  • @Mr.Alien A console.log($(this) shows that $(this) is pointing to .box2. If you reverse the HTML structure of box1 and box2 and change the JavaScript to return 'list' + $(this).find('+ .box1 li').length;, you'll see it's working properly using the adjacent sibling selector added to the start of find.

    – Andy Hoffman
    47 mins ago











  • It would be great to add $(document).ready(function(){, around your JQuery operations,

    – harish sharma
    14 mins ago















6















I am trying to count LI elements, and addclass to another div.



For example, 






$('.box2').addClass(function()
 return 'list' + $(this).find('.box1 li').length;
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="box1">
 <li>a</li>
 <li>b</li>
 <li>c</li>
</ul>


<div class="box2">text</div>





This should be like this 



<div class="box2 list3">text</div>


But I don't know why when I check on the DOM code,



<div class="box2 list0">text</div>


I get this result.



What do I need to fix the code?
Please help.






javascript html css







share|improve this question

















  • 1





    Your $(this) is not pointing to .box2 as you expect

    – Mr. Alien
    1 hour ago











  • @Mr.Alien It is what it actually does, pointing to .box2, hence not working as expected as there is no .box1 after it.

    – LGSon
    53 mins ago












  • @Mr.Alien A console.log($(this) shows that $(this) is pointing to .box2. If you reverse the HTML structure of box1 and box2 and change the JavaScript to return 'list' + $(this).find('+ .box1 li').length;, you'll see it's working properly using the adjacent sibling selector added to the start of find.

    – Andy Hoffman
    47 mins ago











  • It would be great to add $(document).ready(function(){, around your JQuery operations,

    – harish sharma
    14 mins ago













6












6








6








I am trying to count LI elements, and addclass to another div.



For example, 






$('.box2').addClass(function()
 return 'list' + $(this).find('.box1 li').length;
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="box1">
 <li>a</li>
 <li>b</li>
 <li>c</li>
</ul>


<div class="box2">text</div>





This should be like this 



<div class="box2 list3">text</div>


But I don't know why when I check on the DOM code,



<div class="box2 list0">text</div>


I get this result.



What do I need to fix the code?
Please help.






javascript html css







share|improve this question














I am trying to count LI elements, and addclass to another div.



For example, 






$('.box2').addClass(function()
 return 'list' + $(this).find('.box1 li').length;
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="box1">
 <li>a</li>
 <li>b</li>
 <li>c</li>
</ul>


<div class="box2">text</div>





This should be like this 



<div class="box2 list3">text</div>


But I don't know why when I check on the DOM code,



<div class="box2 list0">text</div>


I get this result.



What do I need to fix the code?
Please help.






$('.box2').addClass(function()
 return 'list' + $(this).find('.box1 li').length;
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="box1">
 <li>a</li>
 <li>b</li>
 <li>c</li>
</ul>


<div class="box2">text</div>





$('.box2').addClass(function()
 return 'list' + $(this).find('.box1 li').length;
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="box1">
 <li>a</li>
 <li>b</li>
 <li>c</li>
</ul>


<div class="box2">text</div>





javascript html css




javascript html css






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked 1 hour ago









kk kkkk kk

926




926







  • 1





    Your $(this) is not pointing to .box2 as you expect

    – Mr. Alien
    1 hour ago











  • @Mr.Alien It is what it actually does, pointing to .box2, hence not working as expected as there is no .box1 after it.

    – LGSon
    53 mins ago












  • @Mr.Alien A console.log($(this) shows that $(this) is pointing to .box2. If you reverse the HTML structure of box1 and box2 and change the JavaScript to return 'list' + $(this).find('+ .box1 li').length;, you'll see it's working properly using the adjacent sibling selector added to the start of find.

    – Andy Hoffman
    47 mins ago











  • It would be great to add $(document).ready(function(){, around your JQuery operations,

    – harish sharma
    14 mins ago












  • 1





    Your $(this) is not pointing to .box2 as you expect

    – Mr. Alien
    1 hour ago











  • @Mr.Alien It is what it actually does, pointing to .box2, hence not working as expected as there is no .box1 after it.

    – LGSon
    53 mins ago












  • @Mr.Alien A console.log($(this) shows that $(this) is pointing to .box2. If you reverse the HTML structure of box1 and box2 and change the JavaScript to return 'list' + $(this).find('+ .box1 li').length;, you'll see it's working properly using the adjacent sibling selector added to the start of find.

    – Andy Hoffman
    47 mins ago











  • It would be great to add $(document).ready(function(){, around your JQuery operations,

    – harish sharma
    14 mins ago







1




1





Your $(this) is not pointing to .box2 as you expect

– Mr. Alien
1 hour ago





Your $(this) is not pointing to .box2 as you expect

– Mr. Alien
1 hour ago













@Mr.Alien It is what it actually does, pointing to .box2, hence not working as expected as there is no .box1 after it.

– LGSon
53 mins ago






@Mr.Alien It is what it actually does, pointing to .box2, hence not working as expected as there is no .box1 after it.

– LGSon
53 mins ago














@Mr.Alien A console.log($(this) shows that $(this) is pointing to .box2. If you reverse the HTML structure of box1 and box2 and change the JavaScript to return 'list' + $(this).find('+ .box1 li').length;, you'll see it's working properly using the adjacent sibling selector added to the start of find.

– Andy Hoffman
47 mins ago





@Mr.Alien A console.log($(this) shows that $(this) is pointing to .box2. If you reverse the HTML structure of box1 and box2 and change the JavaScript to return 'list' + $(this).find('+ .box1 li').length;, you'll see it's working properly using the adjacent sibling selector added to the start of find.

– Andy Hoffman
47 mins ago













It would be great to add $(document).ready(function(){, around your JQuery operations,

– harish sharma
14 mins ago





It would be great to add $(document).ready(function(){, around your JQuery operations,

– harish sharma
14 mins ago












5 Answers
5






active

oldest

votes


















5














Pretty close. box1 comes before box2, so your query beginning at box2, or $(this), would return 0 results as find looks ahead in the DOM.






$('.box2').addClass(function()
 return 'list' + $('.box1 li').length;
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="box1">
 <li>a</li>
 <li>b</li>
 <li>c</li>
</ul>

<div class="box2">text</div>








share|improve this answer

























  • thank you for your answer :)

    – kk kk
    1 hour ago


















5














Here $(this) is referring to box2 element.Only $('.box1 li').length is what you required






$('.box2').addClass(function() 
 return 'list_' + $('.box1 li').length;
);

.list_3 
 color: green;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="box1">
 <li>a</li>
 <li>b</li>
 <li>c</li>
</ul>
<div class="box2">text</div>








share|improve this answer

























  • thank you this works perfectly

    – kk kk
    1 hour ago


















4














this is not pointing to the element you are thinking, it is referring to DIV element on which the addClass() is invoked and this element does not have .box1 li. Thus find() is failing to refer your intended element.



Simply use: 



$('.box1 li').length 





$('.box2').addClass(function()
 console.log(this.nodeName); // DIV
 return 'list' + $('.box1 li').length;
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="box1">
 <li>a</li>
 <li>b</li>
 <li>c</li>
</ul>
<div class="box2">text</div>








share|improve this answer
































    4














    $(this).find will find the li in the div with box2 class which are not present. Instead check this in the div with box1 class and find the li elements






    $('.box2').addClass(function()
     return 'list' + $('.box1').find('li').length;
    );

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <ul class="box1">
     <li>a</li>
     <li>b</li>
     <li>c</li>
    </ul>


    <div class="box2">text</div>








    share|improve this answer
































      2














      You can simply do this by following method






      $('.box2').addClass('list' + $('.box1 li').length);

      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <ul class="box1">
       <li>a</li>
       <li>b</li>
       <li>c</li>
      </ul>
      <div class="box2">text</div>








      share|improve this answer






















        Your Answer






        StackExchange.ifUsing("editor", function ()
        StackExchange.using("externalEditor", function ()
        StackExchange.using("snippets", function ()
        StackExchange.snippets.init();
        );
        );
        , "code-snippets");

        StackExchange.ready(function()
        var channelOptions =
        tags: "".split(" "),
        id: "1"
        ;
        initTagRenderer("".split(" "), "".split(" "), channelOptions);

        StackExchange.using("externalEditor", function()
        // Have to fire editor after snippets, if snippets enabled
        if (StackExchange.settings.snippets.snippetsEnabled)
        StackExchange.using("snippets", function()
        createEditor();
        );

        else
        createEditor();

        );

        function createEditor()
        StackExchange.prepareEditor(
        heartbeatType: 'answer',
        autoActivateHeartbeat: false,
        convertImagesToLinks: true,
        noModals: true,
        showLowRepImageUploadWarning: true,
        reputationToPostImages: 10,
        bindNavPrevention: true,
        postfix: "",
        imageUploader:
        brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
        contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
        allowUrls: true
        ,
        onDemand: true,
        discardSelector: ".discard-answer"
        ,immediatelyShowMarkdownHelp:true
        );



        );













        draft saved

        draft discarded


















        StackExchange.ready(
        function ()
        StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55095760%2fcount-number-of-li-element-and-addclass%23new-answer', 'question_page');

        );

        Post as a guest















        Required, but never shown

























        5 Answers
        5






        active

        oldest

        votes








        5 Answers
        5






        active

        oldest

        votes









        active

        oldest

        votes






        active

        oldest

        votes









        5














        Pretty close. box1 comes before box2, so your query beginning at box2, or $(this), would return 0 results as find looks ahead in the DOM.






        $('.box2').addClass(function()
         return 'list' + $('.box1 li').length;
        );

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <ul class="box1">
         <li>a</li>
         <li>b</li>
         <li>c</li>
        </ul>

        <div class="box2">text</div>








        share|improve this answer

























        • thank you for your answer :)

          – kk kk
          1 hour ago















        5














        Pretty close. box1 comes before box2, so your query beginning at box2, or $(this), would return 0 results as find looks ahead in the DOM.






        $('.box2').addClass(function()
         return 'list' + $('.box1 li').length;
        );

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <ul class="box1">
         <li>a</li>
         <li>b</li>
         <li>c</li>
        </ul>

        <div class="box2">text</div>








        share|improve this answer

























        • thank you for your answer :)

          – kk kk
          1 hour ago













        5












        5








        5







        Pretty close. box1 comes before box2, so your query beginning at box2, or $(this), would return 0 results as find looks ahead in the DOM.






        $('.box2').addClass(function()
         return 'list' + $('.box1 li').length;
        );

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <ul class="box1">
         <li>a</li>
         <li>b</li>
         <li>c</li>
        </ul>

        <div class="box2">text</div>








        share|improve this answer















        Pretty close. box1 comes before box2, so your query beginning at box2, or $(this), would return 0 results as find looks ahead in the DOM.






        $('.box2').addClass(function()
         return 'list' + $('.box1 li').length;
        );

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <ul class="box1">
         <li>a</li>
         <li>b</li>
         <li>c</li>
        </ul>

        <div class="box2">text</div>








        $('.box2').addClass(function()
         return 'list' + $('.box1 li').length;
        );

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <ul class="box1">
         <li>a</li>
         <li>b</li>
         <li>c</li>
        </ul>

        <div class="box2">text</div>





        $('.box2').addClass(function()
         return 'list' + $('.box1 li').length;
        );

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <ul class="box1">
         <li>a</li>
         <li>b</li>
         <li>c</li>
        </ul>

        <div class="box2">text</div>






        share|improve this answer














        share|improve this answer



        share|improve this answer








        edited 1 hour ago

























        answered 1 hour ago









        Andy HoffmanAndy Hoffman

        8,07631538




        8,07631538












        • thank you for your answer :)

          – kk kk
          1 hour ago

















        • thank you for your answer :)

          – kk kk
          1 hour ago
















        thank you for your answer :)

        – kk kk
        1 hour ago





        thank you for your answer :)

        – kk kk
        1 hour ago













        5














        Here $(this) is referring to box2 element.Only $('.box1 li').length is what you required






        $('.box2').addClass(function() 
         return 'list_' + $('.box1 li').length;
        );

        .list_3 
         color: green;

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <ul class="box1">
         <li>a</li>
         <li>b</li>
         <li>c</li>
        </ul>
        <div class="box2">text</div>








        share|improve this answer

























        • thank you this works perfectly

          – kk kk
          1 hour ago















        5














        Here $(this) is referring to box2 element.Only $('.box1 li').length is what you required






        $('.box2').addClass(function() 
         return 'list_' + $('.box1 li').length;
        );

        .list_3 
         color: green;

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <ul class="box1">
         <li>a</li>
         <li>b</li>
         <li>c</li>
        </ul>
        <div class="box2">text</div>








        share|improve this answer

























        • thank you this works perfectly

          – kk kk
          1 hour ago













        5












        5








        5







        Here $(this) is referring to box2 element.Only $('.box1 li').length is what you required






        $('.box2').addClass(function() 
         return 'list_' + $('.box1 li').length;
        );

        .list_3 
         color: green;

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <ul class="box1">
         <li>a</li>
         <li>b</li>
         <li>c</li>
        </ul>
        <div class="box2">text</div>








        share|improve this answer















        Here $(this) is referring to box2 element.Only $('.box1 li').length is what you required






        $('.box2').addClass(function() 
         return 'list_' + $('.box1 li').length;
        );

        .list_3 
         color: green;

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <ul class="box1">
         <li>a</li>
         <li>b</li>
         <li>c</li>
        </ul>
        <div class="box2">text</div>








        $('.box2').addClass(function() 
         return 'list_' + $('.box1 li').length;
        );

        .list_3 
         color: green;

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <ul class="box1">
         <li>a</li>
         <li>b</li>
         <li>c</li>
        </ul>
        <div class="box2">text</div>





        $('.box2').addClass(function() 
         return 'list_' + $('.box1 li').length;
        );

        .list_3 
         color: green;

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <ul class="box1">
         <li>a</li>
         <li>b</li>
         <li>c</li>
        </ul>
        <div class="box2">text</div>






        share|improve this answer














        share|improve this answer



        share|improve this answer








        edited 1 hour ago

























        answered 1 hour ago









        brkbrk

        28.4k32143




        28.4k32143












        • thank you this works perfectly

          – kk kk
          1 hour ago

















        • thank you this works perfectly

          – kk kk
          1 hour ago
















        thank you this works perfectly

        – kk kk
        1 hour ago





        thank you this works perfectly

        – kk kk
        1 hour ago











        4














        this is not pointing to the element you are thinking, it is referring to DIV element on which the addClass() is invoked and this element does not have .box1 li. Thus find() is failing to refer your intended element.



        Simply use: 



        $('.box1 li').length 





        $('.box2').addClass(function()
         console.log(this.nodeName); // DIV
         return 'list' + $('.box1 li').length;
        );

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <ul class="box1">
         <li>a</li>
         <li>b</li>
         <li>c</li>
        </ul>
        <div class="box2">text</div>








        share|improve this answer





























          4














          this is not pointing to the element you are thinking, it is referring to DIV element on which the addClass() is invoked and this element does not have .box1 li. Thus find() is failing to refer your intended element.



          Simply use: 



          $('.box1 li').length 





          $('.box2').addClass(function()
           console.log(this.nodeName); // DIV
           return 'list' + $('.box1 li').length;
          );

          <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
          <ul class="box1">
           <li>a</li>
           <li>b</li>
           <li>c</li>
          </ul>
          <div class="box2">text</div>








          share|improve this answer



























            4












            4








            4







            this is not pointing to the element you are thinking, it is referring to DIV element on which the addClass() is invoked and this element does not have .box1 li. Thus find() is failing to refer your intended element.



            Simply use: 



            $('.box1 li').length 





            $('.box2').addClass(function()
             console.log(this.nodeName); // DIV
             return 'list' + $('.box1 li').length;
            );

            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            <ul class="box1">
             <li>a</li>
             <li>b</li>
             <li>c</li>
            </ul>
            <div class="box2">text</div>








            share|improve this answer















            this is not pointing to the element you are thinking, it is referring to DIV element on which the addClass() is invoked and this element does not have .box1 li. Thus find() is failing to refer your intended element.



            Simply use: 



            $('.box1 li').length 





            $('.box2').addClass(function()
             console.log(this.nodeName); // DIV
             return 'list' + $('.box1 li').length;
            );

            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            <ul class="box1">
             <li>a</li>
             <li>b</li>
             <li>c</li>
            </ul>
            <div class="box2">text</div>








            $('.box2').addClass(function()
             console.log(this.nodeName); // DIV
             return 'list' + $('.box1 li').length;
            );

            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            <ul class="box1">
             <li>a</li>
             <li>b</li>
             <li>c</li>
            </ul>
            <div class="box2">text</div>





            $('.box2').addClass(function()
             console.log(this.nodeName); // DIV
             return 'list' + $('.box1 li').length;
            );

            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            <ul class="box1">
             <li>a</li>
             <li>b</li>
             <li>c</li>
            </ul>
            <div class="box2">text</div>






            share|improve this answer














            share|improve this answer



            share|improve this answer








            edited 58 mins ago

























            answered 1 hour ago









            MamunMamun

            29k71831




            29k71831





















                4














                $(this).find will find the li in the div with box2 class which are not present. Instead check this in the div with box1 class and find the li elements






                $('.box2').addClass(function()
                 return 'list' + $('.box1').find('li').length;
                );

                <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
                <ul class="box1">
                 <li>a</li>
                 <li>b</li>
                 <li>c</li>
                </ul>


                <div class="box2">text</div>








                share|improve this answer





























                  4














                  $(this).find will find the li in the div with box2 class which are not present. Instead check this in the div with box1 class and find the li elements






                  $('.box2').addClass(function()
                   return 'list' + $('.box1').find('li').length;
                  );

                  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
                  <ul class="box1">
                   <li>a</li>
                   <li>b</li>
                   <li>c</li>
                  </ul>


                  <div class="box2">text</div>








                  share|improve this answer



























                    4












                    4








                    4







                    $(this).find will find the li in the div with box2 class which are not present. Instead check this in the div with box1 class and find the li elements






                    $('.box2').addClass(function()
                     return 'list' + $('.box1').find('li').length;
                    );

                    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
                    <ul class="box1">
                     <li>a</li>
                     <li>b</li>
                     <li>c</li>
                    </ul>


                    <div class="box2">text</div>








                    share|improve this answer















                    $(this).find will find the li in the div with box2 class which are not present. Instead check this in the div with box1 class and find the li elements






                    $('.box2').addClass(function()
                     return 'list' + $('.box1').find('li').length;
                    );

                    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
                    <ul class="box1">
                     <li>a</li>
                     <li>b</li>
                     <li>c</li>
                    </ul>


                    <div class="box2">text</div>








                    $('.box2').addClass(function()
                     return 'list' + $('.box1').find('li').length;
                    );

                    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
                    <ul class="box1">
                     <li>a</li>
                     <li>b</li>
                     <li>c</li>
                    </ul>


                    <div class="box2">text</div>





                    $('.box2').addClass(function()
                     return 'list' + $('.box1').find('li').length;
                    );

                    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
                    <ul class="box1">
                     <li>a</li>
                     <li>b</li>
                     <li>c</li>
                    </ul>


                    <div class="box2">text</div>






                    share|improve this answer














                    share|improve this answer



                    share|improve this answer








                    edited 25 mins ago

























                    answered 1 hour ago









                    ellipsisellipsis

                    7,6982929




                    7,6982929





















                        2














                        You can simply do this by following method






                        $('.box2').addClass('list' + $('.box1 li').length);

                        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
                        <ul class="box1">
                         <li>a</li>
                         <li>b</li>
                         <li>c</li>
                        </ul>
                        <div class="box2">text</div>








                        share|improve this answer



























                          2














                          You can simply do this by following method






                          $('.box2').addClass('list' + $('.box1 li').length);

                          <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
                          <ul class="box1">
                           <li>a</li>
                           <li>b</li>
                           <li>c</li>
                          </ul>
                          <div class="box2">text</div>








                          share|improve this answer

























                            2












                            2








                            2







                            You can simply do this by following method






                            $('.box2').addClass('list' + $('.box1 li').length);

                            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
                            <ul class="box1">
                             <li>a</li>
                             <li>b</li>
                             <li>c</li>
                            </ul>
                            <div class="box2">text</div>








                            share|improve this answer













                            You can simply do this by following method






                            $('.box2').addClass('list' + $('.box1 li').length);

                            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
                            <ul class="box1">
                             <li>a</li>
                             <li>b</li>
                             <li>c</li>
                            </ul>
                            <div class="box2">text</div>








                            $('.box2').addClass('list' + $('.box1 li').length);

                            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
                            <ul class="box1">
                             <li>a</li>
                             <li>b</li>
                             <li>c</li>
                            </ul>
                            <div class="box2">text</div>





                            $('.box2').addClass('list' + $('.box1 li').length);

                            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
                            <ul class="box1">
                             <li>a</li>
                             <li>b</li>
                             <li>c</li>
                            </ul>
                            <div class="box2">text</div>






                            share|improve this answer












                            share|improve this answer



                            share|improve this answer










                            answered 1 hour ago









                            Sarabjit SinghSarabjit Singh

                            1169




                            1169



























                                draft saved

                                draft discarded
















































                                Thanks for contributing an answer to Stack Overflow!


                                • Please be sure to answer the question. Provide details and share your research!

                                But avoid …


                                • Asking for help, clarification, or responding to other answers.

                                • Making statements based on opinion; back them up with references or personal experience.

                                To learn more, see our tips on writing great answers.




                                draft saved


                                draft discarded














                                StackExchange.ready(
                                function ()
                                StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55095760%2fcount-number-of-li-element-and-addclass%23new-answer', 'question_page');

                                );

                                Post as a guest















                                Required, but never shown





















































                                Required, but never shown














                                Required, but never shown












                                Required, but never shown







                                Required, but never shown

































                                Required, but never shown














                                Required, but never shown












                                Required, but never shown







                                Required, but never shown







                                -css, html, javascript
                                -

                                Popular posts from this blog

                                Mobil Contents History Mobil brands Former Mobil brands Lukoil transaction Mobil UK Mobil Australia Mobil New Zealand Mobil Greece Mobil in Japan Mobil in Canada Mobil Egypt See also References External links Navigation menuwww.mobil.com"Mobil Corporation"the original"Our Houston campus""Business & Finance: Socony-Vacuum Corp.""Popular Mechanics""Lubrite Technologies""Exxon Mobil campus 'clearly happening'""Toledo Blade - Google News Archive Search""The Lion and the Moose - How 2 Executives Pulled off the Biggest Merger Ever""ExxonMobil Press Release""Lubricants""Archived copy"the original"Mobil 1™ and Mobil Super™ motor oil and synthetic motor oil - Mobil™ Motor Oils""Mobil Delvac""Mobil Industrial website""The State of Competition in Gasoline Marketing: The Effects of Refiner Operations at Retail""Mobil Travel Guide to become Forbes Travel Guide""Hotel Rankings: Forbes Merges with Mobil"the original"Jamieson oil industry history""Mobil news""Caltex pumps for control""Watchdog blocks Caltex bid""Exxon Mobil sells service station network""Mobil Oil New Zealand Limited is New Zealand's oldest oil company, with predecessor companies having first established a presence in the country in 1896""ExxonMobil subsidiaries have a business history in New Zealand stretching back more than 120 years. We are involved in petroleum refining and distribution and the marketing of fuels, lubricants and chemical products""Archived copy"the original"Exxon Mobil to Sell Its Japanese Arm for $3.9 Billion""Gas station merger will end Esso and Mobil's long run in Japan""Esso moves to affiliate itself with PC Optimum, no longer Aeroplan, in loyalty point switch""Mobil brand of gas stations to launch in Canada after deal for 213 Loblaws-owned locations""Mobil Nears Completion of Rebranding 200 Loblaw Gas Stations""Learn about ExxonMobil's operations in Egypt""Petrol and Diesel Service Stations in Egypt - Mobil"Official websiteExxon Mobil corporate websiteMobil Industrial official websiteeeeeeeeDA04275022275790-40000 0001 0860 5061n82045453134887257134887257

                                Image
                                Aera EnergyEssoEsso AustraliaExxonExxon NeftegasHumble OilImperial OilMagnolia Petroleum CompanyMobilMobil Producing NigeriaPetronSeaRiver MaritimeSuperior Oil CompanySyncrudeVacuum Oil CompanyXTO EnergyBaton Rouge RefineryBaytown RefineryMilford HavenExxon Building (New York)Fawley RefineryImperial Oil BuildingMossmorranNanticoke Refinery2010 ExxonMobil oil spill2010 Port Arthur oil spill2013 Mayflower oil spill Exxon Valdez oil spillGreenpoint oil spillSS Atlantic Empress SS Esso Brussels Colony Shale Oil ProjectEast-Prinovozemelsky fieldGoose Creek Oil FieldKearl Oil Sands ProjectKizomba deepwater projectOrmen LangePembina oil fieldPrudhoe Bay Oil FieldSable Offshore Energy ProjectSakhalin-ITengiz FieldTern oilfieldTuapse fieldWest Qurna FieldNational OilSasolSparSpar Express759 Store7-ElevenCircle KCUDaily YamazakiFamilyMartGS25LawsonMinistopParknShopPoplarSparStorywayVanGOemartSparampmBuy the WayBP ConnectCircle K SunkusDaily StopOn the Run7-ElevenBargain BoozeBest-OneBP ConnectB
                                Read more

                                Frič See also Navigation menuinternal link

                                Image
                                SurnamesCzech-language surnames ‹ The template Infobox surname is being considered for merging. › Frič Origin Language(s) Czechized German (eastern Middle German dialects and Alemannic German) - Thuringian, Upper Saxon, Low Lusatian, Silesian Meaning derived from German: Friedrich Other names Variant(s) Fritsch, Fritzsch, Frycz, Fricz, Fryczyński, Frietsch, Fritsche, Fritzsche; Fritschi (Alemannic), Fritz, Fritze, Fritzel, Fritzl, Fritzke, Fritzen Frič is a Czechized German surname. Notable people with the surname include: Alberto Vojtěch Frič, Czech botanist Antonín Jan Frič (Fritsch) , Czech paleontologist Jaroslav Erik Frič, Czech poet Martin Frič, Czech film director, screenwriter and actor See also Fričovce (Hungarian: Frics ) .mw-parser-output table.dmboxclear:both;margin:0.9em 1em;border-top:1px solid #ccc;border-bottom:1px solid #ccc;background-color:transparent Surname list This page lists people with the surname Frič . If an internal link intending to refer to a specifi
                                Read more

                                Identify plant with long narrow paired leaves and reddish stems Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern) Announcing the arrival of Valued Associate #679: Cesar Manara Unicorn Meta Zoo #1: Why another podcast?What is this plant with long sharp leaves? Is it a weed?What is this 3ft high, stalky plant, with mid sized narrow leaves?What is this young shrub with opposite ovate, crenate leaves and reddish stems?What is this plant with large broad serrated leaves?Identify this upright branching weed with long leaves and reddish stemsPlease help me identify this bulbous plant with long, broad leaves and white flowersWhat is this small annual with narrow gray/green leaves and rust colored daisy-type flowers?What is this chilli plant?Does anyone know what type of chilli plant this is?Help identify this plant

                                Image
                                Apollo command module space walk? prime numbers and expressing non-prime numbers Can a non-EU citizen traveling with me come with me through the EU passport line? Extract all GPU name, model and GPU ram How to deal with a team lead who never gives me credit? Why was the term "discrete" used in discrete logarithm? Why do we bend a book to keep it straight? When do you get frequent flier miles - when you buy, or when you fly? How come Sam didn't become Lord of Horn Hill? At the end of Thor: Ragnarok why don't the Asgardians turn and head for the Bifrost as per their original plan? Is it true that "carbohydrates are of no use for the basal metabolic need"? Using et al. for a last / senior author rather than for a first author How to tell that you are a giant? How to react to hostile behavior from a senior developer? String `!23` is replaced with `docker` in command line How to find out what spells would be useless to a blind NPC sp
                                Read more