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

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.

asked 1 hour ago

kk 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
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

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.

asked 1 hour ago

kk 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
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

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.

asked 1 hour ago

kk kk

926

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

asked 1 hour ago

kk kk

926

asked 1 hour ago

kk kk

926

asked 1 hour ago

kk kk

926

asked 1 hour ago

kk kk

926

asked 1 hour ago

kk 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
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

add a comment |

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

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

add a comment |

5 Answers
5

active

oldest

votes

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>

edited 1 hour ago

answered 1 hour ago

Andy Hoffman

8,07631538

thank you for your answer :)

– 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>

edited 1 hour ago

answered 1 hour ago

brk

28.4k32143

thank you this works perfectly

– kk kk
1 hour ago

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>

edited 55 mins ago

answered 1 hour ago

Mamun

29k71831

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>

edited 21 mins ago

answered 1 hour ago

ellipsis

7,6962929

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>

answered 1 hour ago

Sarabjit 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');
});

Post as a guest

Name

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

Required, but never shown

5 Answers
5

active

oldest

votes

5 Answers
5

active

oldest

votes

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>

edited 1 hour ago

answered 1 hour ago

Andy 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>

edited 1 hour ago

answered 1 hour ago

Andy 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>

edited 1 hour ago

answered 1 hour ago

Andy Hoffman

8,07631538

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>

edited 1 hour ago

answered 1 hour ago

Andy Hoffman

8,07631538

edited 1 hour ago

answered 1 hour ago

Andy Hoffman

8,07631538

answered 1 hour ago

Andy Hoffman

8,07631538

answered 1 hour ago

Andy Hoffman

8,07631538

thank you for your answer :)

– kk kk
1 hour ago

add a comment |

thank you for your answer :)

– kk kk
1 hour ago

thank you for your answer :)

– 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>

edited 1 hour ago

answered 1 hour ago

brk

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>

edited 1 hour ago

answered 1 hour ago

brk

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>

edited 1 hour ago

answered 1 hour ago

brk

28.4k32143

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>

edited 1 hour ago

answered 1 hour ago

brk

28.4k32143

edited 1 hour ago

answered 1 hour ago

brk

28.4k32143

answered 1 hour ago

brk

28.4k32143

answered 1 hour ago

brk

28.4k32143

thank you this works perfectly

– kk kk
1 hour ago

add a comment |

thank you this works perfectly

– kk kk
1 hour ago

thank you this works perfectly

– kk kk
1 hour ago

add a comment |

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>

edited 55 mins ago

answered 1 hour ago

Mamun

29k71831

add a comment |

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>

edited 55 mins ago

answered 1 hour ago

Mamun

29k71831

add a comment |

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>

edited 55 mins ago

answered 1 hour ago

Mamun

29k71831

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>

edited 55 mins ago

answered 1 hour ago

Mamun

29k71831

edited 55 mins ago

answered 1 hour ago

Mamun

29k71831

answered 1 hour ago

Mamun

29k71831

answered 1 hour ago

Mamun

29k71831

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>

edited 21 mins ago

answered 1 hour ago

ellipsis

7,6962929

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>

edited 21 mins ago

answered 1 hour ago

ellipsis

7,6962929

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>

edited 21 mins ago

answered 1 hour ago

ellipsis

7,6962929

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

edited 21 mins ago

answered 1 hour ago

ellipsis

7,6962929

edited 21 mins ago

answered 1 hour ago

ellipsis

7,6962929

answered 1 hour ago

ellipsis

7,6962929

answered 1 hour ago

ellipsis

7,6962929

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>

answered 1 hour ago

Sarabjit 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>

answered 1 hour ago

Sarabjit 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>

answered 1 hour ago

Sarabjit Singh

1169

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>

answered 1 hour ago

Sarabjit Singh

1169

answered 1 hour ago

Sarabjit Singh

1169

answered 1 hour ago

Sarabjit Singh

1169

answered 1 hour ago

Sarabjit Singh

1169

add a comment |

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

Sign up or log in

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

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

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

Post as a guest

Name

Required, but never shown

Sign up or log in

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

Post as a guest

Name

Required, but never shown

Sign up or log in

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

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Mrthfx