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

                                Word for a person who has no opinion about whether god existsWord for having a definite opinion while simultaneously withholding judgment?What's the opposite of “newcomer? Is ”veteran" OK?What do you call an “atheist” who might believe in an afterlife?What's a word for someone who wants to voice opinions but not have them challenged?Word for someone who dismisses contrary opinions as irrational?Somone who thinks they are overly special/out of the ordinaryIs there a word, phrase or idiom for “a person who is incapable of thinking about the future”?The belief that a god is human-likeA word for a non-famous person/thing you have heard a lot aboutAdjective for a person who enjoys taking care of their appearance

                                Image
                                Reverse string, can I make it faster? How strictly should I take "Candidates must be local"? Are there historical instances of the capital of a colonising country being temporarily or permanently shifted to one of its colonies? Accepted offer letter, position changed Could you please stop shuffling the deck and play already? How to secure an aircraft at a transient parking space? At what distance can a bugbear, holding a reach weapon, with the Polearm Master feat, get their Opportunity Attack? Why was Goose renamed from Chewie for the Captain Marvel film? Is it necessary to separate DC power cables and data cables? Is "history" a male-biased word ("his+story")? Why the color red for the Republican Party What's wrong with this bogus proof? 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? Can one live in the U.S. and not use a c...
                                Read more

                                What was this official D&D 3.5e Lovecraft-flavored rulebook?What was this set of RPG tools called?As a first-time DM should I let my players play complex character classes and roles?Nymph's Kiss and the RelationshipWhat was the name of this Cleric Prestige Class that shapes metal with its bare hands?Are the 3.5e Dragonlance books third party or official works?What's up with the domain Vile Darkness?What was this 80s book about RPGs?What was the name of this Werewolf band?What book had Rituals to “upgrade” animal companions to keep them viable at higher levels?What was this RPG that had rules for player-owned businesses?

                                Image
                                Can a Bard use an arcane focus? Indicating multiple different modes of speech (fantasy language or telepathy) The most efficient algorithm to find all possible integer pairs which sum to a given integer A known event to a history junkie How to color a zone in Tikz Simple image editor tool to draw a simple box/rectangle in an existing image Golf game boilerplate Can I use my Chinese passport to enter China after I acquired another citizenship? No idea how to draw this using tikz Is there an Impartial Brexit Deal comparison site? Reply ‘no position’ while the job posting is still there (‘HiWi’ position in Germany) Bob has never been a M before Lifted its hind leg on or lifted its hind leg towards? Can I rely on these GitHub repository files? How do I repair my stair bannister? Pronouncing Homer as in modern Greek What do you call the infoboxes with text and sometimes images on the side of a page we find in textbooks? What will be t...
                                Read more

                                2017 IndyCar Series Contents Series news Teams and drivers Schedule Season summary Footnotes References External links Navigation menu"INDYCAR: Initial 2018 bodywork concepts unveiled"the original"IndyCar confirms switch to Performance Friction brakes in 2017""AJ Foyt Racing will switch to Chevy"the original"Carlos Munoz, Conor Daly will drive for AJ Foyt Racing""Zach Veach's Indy 500 Debut Confirmed with Foyt""No mass exodus from Honda after Ganassi switch""Ex-F1 driver Sato joins Andretti Autosport for 2017 IndyCar season""IndyCar's Ryan Hunter-Reay, sponsor DHL paired through 2020""hhgregg and Andretti Autosport announce partnership for key races in 2016""INDYCAR: Rossi re-signs with Andretti"the original"McLaren Formula 1 - Fernando Alonso to race at Indy 500 with McLaren, Honda and Andretti Autosport""Shank will finally take part in Indy 500 with Harvey, Andretti | MotorSportsTalk""Andretti adds Jack Harvey to Indy 500 field""Ganassi switches to Honda power for 2017""INDYCAR: Chilton returns to Ganassi"the original"IndyCar silly season: Who's going where in 2017?""INDYCAR: Kanaan, NTT Data return to Ganassi"the original"Kimball to remain at Ganassi for 2017""Coyne confirms Bourdais for 2017 IndyCar season""Davison to sub for Bourdais in Indy 500"the original"Gutierrez confirmed for Detroit IndyCar debut""Gutierrez returns with Coyne for rest of 2017 season""Vautier to drive for Coyne at Texas"the original"INDYCAR: Coyne confirms Jones for 2017"the original"Pippa Mann returns to Coyne for Indy 500""Karam, Dreyer & Reinbold teaming up again for Indianapolis 500""Pigot to return to Ed Carpenter Racing""Hildebrand confirmed as full-time Ed Carpenter driver""Veach to replace injured Hildebrand at Barber"the originalNew Team Harding Racing Enters Chaves for 101st Indianapolis 500"Juncos Racing Announces Entry in 101st Running of the Indianapolis 500 :: Juncos Racing""Juncos confirms Pigot for Indy 500""Saavedra confirmed in Juncos' second 500 entry"the original"Lazier confirms Indy 500 run after son's USF2000 debut"the original"Claman DeMelo to race for RLLR at Sonoma"the original"Rahal signs Servia and ace engineer for 2017""IndyCar: Aleshin returns with Schmidt"the original"Aleshin replaced by Saavedra for Toronto""Jack Harvey will pilot SPM No. 7 car at Watkins Glen, Sonoma""Jay Howard confirmed in Tony Stewart's supported SPM Indy entry""INDYCAR: Newgarden to wave the flag at Penske"the original"Pagenaud opts for No. 1 in 2017"the original"Penske confirms Newgarden for 2017""Montoya to stay with Team Penske in 2017""Target leaving IndyCar after 27 seasons with Chip Ganassi""Cavin: IndyCar could see complete driver/team shakeup in 2017""End of the road for KV Racing?""KV Racing confirms closure, equipment sold to Juncos""Juncos confirms IndyCar Series entry"the original"Juncos readies IndyCar program, aims for '17 500"the original"Harding Racing to add Texas, Pocono to schedule"the original"Sato signs with Andretti Autosport for 2017""INDYCAR: Aleshin in Doubt at SPM"the original"Long Beach notebook: JR Hildebrand breaks hand""Hildebrand cleared to return at Phoenix"the original"Bourdais to undergo surgery on multiple fractures""Aleshin loses Schmidt Peterson IndyCar ride""Saavedra in at SPM for Pocono, Gateway"the original"Bourdais to make return at Gateway"the original"The IndyCar Grand Prix no longer is sponsored by Angie's List""2017 IndyCar Series rulebook""2017 Verizon IndyCar Series Official Rulebook"Official websiteeeeee

                                Image
                                1905190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194619471948194919501951195219531954195519791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200819961996–971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019Kenny BräckBuzz CalkinsScott DixonDario FranchittiSam Hornish Jr.Ryan Hunter-ReayTony KanaanBuddy LazierJosef NewgardenSimon PagenaudWill PowerGreg RayScott SharpTony StewartDan WheldonGatewayIndianapolisIowaPoconoTexasBarberCircuit of the AmericasIndianapolisLaguna SecaMid-OhioPortlandRoad AmericaDetroitLong BeachSt. PetersburgTorontoAtlantaBaltimoreCharlotteChicagolandDoverEdmontonFontanaHomesteadHoustonKansasKentuckyLas VegasLouisianaMichiganMilwaukeeMotegiNashvilleNazarethNew HampshirePhoenixPikes PeakRichmondSão PauloSonomaSurfers ParadiseWalt Disney WorldWatkins GlenBostonBras...
                                Read more