Count number of li element and addclass2019 Community Moderator ElectionValidate decimal numbers in...

How to check whether module is loaded with custom configurations?

Can I use a violin G string for D?

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

Why does Central Limit Theorem break down in my simulation?

Is there a difference between equilibrium and steady state?

Specifying a starting column with colortbl package and xcolor

Called into a meeting and told we are being made redundant (laid off) and "not to share outside". Can I tell my partner?

Was it really inappropriate to write a pull request for the company I interviewed with?

What stops an assembly program from crashing the operating system?

Is it possible that a question has only two answers?

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

Source permutation

Crossing a border with an infant of a different citizenship

How to draw dashed arc of a circle behind pyramid?

What materials can be used to make a humanoid skin warm?

Giving a career talk in my old university, how prominently should I tell students my salary?

Why do we say ‘pairwise disjoint’, rather than ‘disjoint’?

What do *foreign films* mean for an American?

Should I take out a loan for a friend to invest on my behalf?

How can I get players to focus on the story aspect of D&D?

What will happen if my luggage gets delayed?

Outlet with 3 sets of wires

From an axiomatic set theoric approach why can we take uncountable unions?

After `ssh` without `-X` to a machine, is it possible to change `$DISPLAY` to make it work like `ssh -X`?



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
    49 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
    44 mins ago











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

    – harish sharma
    11 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
    49 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
    44 mins ago











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

    – harish sharma
    11 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
    49 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
    44 mins ago











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

    – harish sharma
    11 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
    49 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
    44 mins ago











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

    – harish sharma
    11 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
49 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
49 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
44 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
44 mins ago













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

– harish sharma
11 mins ago





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

– harish sharma
11 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 55 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 21 mins ago

























                    answered 1 hour ago









                    ellipsisellipsis

                    7,6962929




                    7,6962929























                        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







                                -

                                Popular posts from this blog

                                Paper upload error, “Upload failed: The top margin is 0.715 in on page 3, which is below the required...

                                Image
                                Consequences of lack of rigour Can we harness gravitational potential energy? How would an AI self awareness kill switch work? How do you funnel food off a cutting board? Why zero tolerance on nudity in space? Avoid page break between paragraphs Does dispel magic end a master's control over their undead? Clues on how to solve these types of problems within 2-3 minutes for competitive exams Why do cars have plastic shrouds over the engine? Why avoid shared user accounts? Should I reinstall Linux when changing the laptop's CPU? It took me a lot of
                                Read more

                                Emraan Hashmi Filmografia | Linki zewnętrzne | Menu nawigacyjneGulshan GroverGulshan...

                                Image
                                Indyjscy aktorzy filmowiUrodzeni w 1979 24 marca1979BombajubollywoodzkikatoliczkąmuzułmaninemBollywoodzietabubollywoodzkich Gulshan Grover Data i miejsce urodzenia 24 marca 1979 r. Bombaj Indie Multimedia w Wikimedia Commons Emraan Hashmi (ur. jako Emran Anwar Hashmi 24 marca 1979 w Bombaju) – bollywoodzki aktor, nominowany do nagród za negatywne role w filmach Gangster i Murder . Jego matka była katoliczką, ojciec – muzułmaninem. Sam jest muzułmaninem. Od 2007 roku żonaty z nauczycielką Parveen Sahani. Słynie w Bollywoodzie ze scen z pocałunkami, które są zazwyczaj tabu dla filmów bollywoodzkich. Filmografia | Rok Film Rola Uwagi 2003 Footpath Raghu Srivastav ulubiona rola Emraana 2004 Murder Sunny i Mallika Sherawat i Ashmit Patel Tumsa Nahin Dekha Daksh Mittal z Diya Mirza 2005 Zeher Siddharth Mehra i Shamita Shetty i Udita Goswami Aashiq Banaya Aapne Vikram Mathur i Tanushree Dutta i Sonu Sood Kaly
                                Read more

                                How can I write this formula?newline and italics added with leqWhy does widehat behave differently if I...

                                Image
                                How can Republicans who favour free markets, consistently express anger when they don't like the outcome of that choice? Critique of timeline aesthetic Why other Westeros houses don't use wildfire? A Strange Latex Symbol Is the 5 MB static resource size limit 5,242,880 bytes or 5,000,000 bytes? Pass By Reference VS Pass by Value Apply MapThread to all but one variable Don’t seats that recline flat defeat the purpose of having seatbelts? Was there a shared-world project before "Thieves World"? Is there a way to get a compiler for the original B programming language? Packing re
                                Read more