Gsyfuy

Whose blood did Carol Danver's receive, Mar-vell's or Yon-Rogg's in the movie?

For which categories of spectra is there an explicit description of the fibrant objects via lifting properties?

Can I negotiate a patent idea for a raise, under French law?

Windows Server Datacenter Edition - Unlimited Virtual Machines

How to check whether module is loaded with custom configurations?

Which situations would cause a company to ground or recall a aircraft series?

Trig Subsitution When There's No Square Root

How to resolve: Reviewer #1 says remove section X vs. Reviewer #2 says expand section X

What will happen if my luggage gets delayed?

Vocabulary for giving just numbers, not a full answer

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 would be the most expensive material to an intergalactic society?

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

What's the 'present simple' form of the word "нашла́" in 3rd person singular female?

Is there a difference between equilibrium and steady state?

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

How many characters using PHB rules does it take to be able to have access to any PHB spell at the start of an adventuring day?

Confusion about Complex Continued Fraction

Drawing close together horizontal lines in Latex

Has a sovereign Communist government ever run, and conceded loss, on a fair election?

When a wind turbine does not produce enough electricity how does the power company compensate for the loss?

Are small insurances worth it?

Street obstacles in New Zealand

Count number of li element and addclass

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

asked 1 hour ago

kk kkkk kk

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
  56 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
  51 mins ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It would be great to add $(document).ready(function(){, around your JQuery operations,
  
  – harish sharma
  17 mins ago
  

  
  
  
  

add a comment | 

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

asked 1 hour ago

kk kkkk kk

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
  56 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
  51 mins ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It would be great to add $(document).ready(function(){, around your JQuery operations,
  
  – harish sharma
  17 mins ago
  

  
  
  
  

add a comment | 

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

asked 1 hour ago

kk kkkk kk

926

$('.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>

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

<div class="box2 list0">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>

$('.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>

share|improve this question

asked 1 hour ago

kk kkkk kk

926

share|improve this question

asked 1 hour ago

kk kkkk kk

926

asked 1 hour ago

kk kkkk kk

926

asked 1 hour ago

kk kkkk kk

926

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

edited 1 hour ago

answered 1 hour ago

Andy HoffmanAndy Hoffman

8,07631538

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thank you for your answer :)
  
  – kk kk
  1 hour ago
  

  
  
  
  

add a comment | 

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

edited 1 hour ago

answered 1 hour ago

brkbrk

28.4k32143

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thank you this works perfectly
  
  – kk kk
  1 hour ago
  

  
  
  
  

add a comment | 

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

edited 1 hour ago

answered 1 hour ago

MamunMamun

29k71831

add a comment | 

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

edited 28 mins ago

answered 1 hour ago

ellipsisellipsis

7,6982929

add a comment | 

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

answered 1 hour ago

Sarabjit SinghSarabjit Singh

1169

add a comment | 

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

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

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

Name

Email

Required, but never shown

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

edited 1 hour ago

answered 1 hour ago

Andy HoffmanAndy Hoffman

8,07631538

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thank you for your answer :)
  
  – kk kk
  1 hour ago
  

  
  
  
  

add a comment | 

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

edited 1 hour ago

answered 1 hour ago

Andy HoffmanAndy Hoffman

8,07631538

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thank you for your answer :)
  
  – kk kk
  1 hour ago
  

  
  
  
  

add a comment | 

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

edited 1 hour ago

answered 1 hour ago

Andy HoffmanAndy Hoffman

8,07631538

$('.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

edited 1 hour ago

answered 1 hour ago

Andy HoffmanAndy Hoffman

8,07631538

answered 1 hour ago

Andy HoffmanAndy Hoffman

8,07631538

answered 1 hour ago

Andy HoffmanAndy Hoffman

8,07631538

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

edited 1 hour ago

answered 1 hour ago

brkbrk

28.4k32143

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thank you this works perfectly
  
  – kk kk
  1 hour ago
  

  
  
  
  

add a comment | 

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

edited 1 hour ago

answered 1 hour ago

brkbrk

28.4k32143

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thank you this works perfectly
  
  – kk kk
  1 hour ago
  

  
  
  
  

add a comment | 

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

edited 1 hour ago

answered 1 hour ago

brkbrk

28.4k32143

$('.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

edited 1 hour ago

answered 1 hour ago

brkbrk

28.4k32143

answered 1 hour ago

brkbrk

28.4k32143

answered 1 hour ago

brkbrk

28.4k32143

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

edited 1 hour ago

answered 1 hour ago

MamunMamun

29k71831

add a comment | 

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

edited 1 hour ago

answered 1 hour ago

MamunMamun

29k71831

add a comment | 

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

edited 1 hour ago

answered 1 hour ago

MamunMamun

29k71831

$('.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

edited 1 hour ago

answered 1 hour ago

MamunMamun

29k71831

answered 1 hour ago

MamunMamun

29k71831

answered 1 hour ago

MamunMamun

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

edited 28 mins ago

answered 1 hour ago

ellipsisellipsis

7,6982929

add a comment | 

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

edited 28 mins ago

answered 1 hour ago

ellipsisellipsis

7,6982929

add a comment | 

$(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

edited 28 mins ago

answered 1 hour ago

ellipsisellipsis

7,6982929

$('.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

edited 28 mins ago

answered 1 hour ago

ellipsisellipsis

7,6982929

answered 1 hour ago

ellipsisellipsis

7,6982929

answered 1 hour ago

ellipsisellipsis

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

answered 1 hour ago

Sarabjit SinghSarabjit Singh

1169

add a comment | 

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

answered 1 hour ago

Sarabjit SinghSarabjit Singh

1169

add a comment | 

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

answered 1 hour ago

Sarabjit SinghSarabjit Singh

1169

$('.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

answered 1 hour ago

Sarabjit SinghSarabjit Singh

1169

answered 1 hour ago

Sarabjit SinghSarabjit Singh

1169

answered 1 hour ago

Sarabjit SinghSarabjit Singh

1169