Count number of li element and add class
12
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 jquery html css
edited 7 hours ago
Helenesh
1,2811023
asked 11 hours ago
kk kkkk kk
1227
add a comment |
12
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 jquery html css
edited 7 hours ago
Helenesh
1,2811023
asked 11 hours ago
kk kkkk kk
1227
1
Your$(this)is not pointing to.box2as you expect
– Mr. Alien
11 hours ago
@Mr.Alien It is what it actually does, pointing to.box2, hence not working as expected as there is no.box1after it.
– LGSon
11 hours ago
It would be great to add$(document).ready(function(){, around your JQuery operations,
– harish sharma
10 hours ago
add a comment |
12
12
12
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 jquery html css
edited 7 hours ago
Helenesh
1,2811023
asked 11 hours ago
kk kkkk kk
1227
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 jquery html css
javascript jquery html css
edited 7 hours ago
Helenesh
1,2811023
asked 11 hours ago
kk kkkk kk
1227
edited 7 hours ago
Helenesh
1,2811023
asked 11 hours ago
kk kkkk kk
1227
edited 7 hours ago
Helenesh
1,2811023
edited 7 hours ago
Helenesh
1,2811023
edited 7 hours ago
Helenesh
1,2811023
1,2811023
asked 11 hours ago
kk kkkk kk
1227
asked 11 hours ago
kk kkkk kk
1227
asked 11 hours ago
kk kkkk kk
1227
1227
1
Your$(this)is not pointing to.box2as you expect
– Mr. Alien
11 hours ago
@Mr.Alien It is what it actually does, pointing to.box2, hence not working as expected as there is no.box1after it.
– LGSon
11 hours ago
It would be great to add$(document).ready(function(){, around your JQuery operations,
– harish sharma
10 hours ago
add a comment |
1
Your$(this)is not pointing to.box2as you expect
– Mr. Alien
11 hours ago
@Mr.Alien It is what it actually does, pointing to.box2, hence not working as expected as there is no.box1after it.
– LGSon
11 hours ago
It would be great to add$(document).ready(function(){, around your JQuery operations,
– harish sharma
10 hours ago
1
1
Your
$(this) is not pointing to .box2 as you expect– Mr. Alien
11 hours ago
Your
$(this) is not pointing to .box2 as you expect– Mr. Alien
11 hours 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
11 hours 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
11 hours ago
It would be great to add
$(document).ready(function(){, around your JQuery operations,– harish sharma
10 hours ago
It would be great to add
$(document).ready(function(){, around your JQuery operations,– harish sharma
10 hours ago
add a comment |
5 Answers
5
active
oldest
votes
12
Your query looks for .box1 li within .box2, though these two elements are siblings. Therefore, your find() query will always return 0.
For your query to work, your HTML would need to look like this:
<div class="box2">text
<ul class="box1">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
Without altering the structure of your HTML, you can get this to work by accessing .box1 li directly:
$('.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>answered 11 hours ago
Andy HoffmanAndy Hoffman
8,14631739
This explanation is wrong, even ifbox2was beforebox1,$(this)evaluates to divbox2and looks for.box1 liamongbox2's descendants
– barbsan
7 hours ago
1
@barbsan Thanks for the feedback. I've updated the example with a more thorough explanation.
– Andy Hoffman
6 hours ago
add a comment |
7
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>answered 11 hours ago
brkbrk
28.5k32143
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>answered 11 hours ago
MamunMamun
29.1k71831
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>answered 11 hours ago
ellipsisellipsis
7,7862929
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>answered 11 hours ago
Sarabjit SinghSarabjit Singh
8110
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
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-add-class%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
12
Your query looks for .box1 li within .box2, though these two elements are siblings. Therefore, your find() query will always return 0.
For your query to work, your HTML would need to look like this:
<div class="box2">text
<ul class="box1">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
Without altering the structure of your HTML, you can get this to work by accessing .box1 li directly:
$('.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>answered 11 hours ago
Andy HoffmanAndy Hoffman
8,14631739
This explanation is wrong, even ifbox2was beforebox1,$(this)evaluates to divbox2and looks for.box1 liamongbox2's descendants
– barbsan
7 hours ago
1
@barbsan Thanks for the feedback. I've updated the example with a more thorough explanation.
– Andy Hoffman
6 hours ago
add a comment |
12
Your query looks for .box1 li within .box2, though these two elements are siblings. Therefore, your find() query will always return 0.
For your query to work, your HTML would need to look like this:
<div class="box2">text
<ul class="box1">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
Without altering the structure of your HTML, you can get this to work by accessing .box1 li directly:
$('.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>answered 11 hours ago
Andy HoffmanAndy Hoffman
8,14631739
This explanation is wrong, even ifbox2was beforebox1,$(this)evaluates to divbox2and looks for.box1 liamongbox2's descendants
– barbsan
7 hours ago
1
@barbsan Thanks for the feedback. I've updated the example with a more thorough explanation.
– Andy Hoffman
6 hours ago
add a comment |
12
12
12
Your query looks for .box1 li within .box2, though these two elements are siblings. Therefore, your find() query will always return 0.
For your query to work, your HTML would need to look like this:
<div class="box2">text
<ul class="box1">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
Without altering the structure of your HTML, you can get this to work by accessing .box1 li directly:
$('.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>answered 11 hours ago
Andy HoffmanAndy Hoffman
8,14631739
Your query looks for .box1 li within .box2, though these two elements are siblings. Therefore, your find() query will always return 0.
For your query to work, your HTML would need to look like this:
<div class="box2">text
<ul class="box1">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
Without altering the structure of your HTML, you can get this to work by accessing .box1 li directly:
$('.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>answered 11 hours ago
Andy HoffmanAndy Hoffman
8,14631739
edited 6 hours ago
answered 11 hours ago
Andy HoffmanAndy Hoffman
8,14631739
answered 11 hours ago
Andy HoffmanAndy Hoffman
8,14631739
answered 11 hours ago
Andy HoffmanAndy Hoffman
8,14631739
8,14631739
This explanation is wrong, even ifbox2was beforebox1,$(this)evaluates to divbox2and looks for.box1 liamongbox2's descendants
– barbsan
7 hours ago
1
@barbsan Thanks for the feedback. I've updated the example with a more thorough explanation.
– Andy Hoffman
6 hours ago
add a comment |
This explanation is wrong, even ifbox2was beforebox1,$(this)evaluates to divbox2and looks for.box1 liamongbox2's descendants
– barbsan
7 hours ago
1
@barbsan Thanks for the feedback. I've updated the example with a more thorough explanation.
– Andy Hoffman
6 hours ago
This explanation is wrong, even if
box2 was before box1, $(this) evaluates to div box2 and looks for .box1 li among box2's descendants– barbsan
7 hours ago
This explanation is wrong, even if
box2 was before box1, $(this) evaluates to div box2 and looks for .box1 li among box2's descendants– barbsan
7 hours ago
1
1
@barbsan Thanks for the feedback. I've updated the example with a more thorough explanation.
– Andy Hoffman
6 hours ago
@barbsan Thanks for the feedback. I've updated the example with a more thorough explanation.
– Andy Hoffman
6 hours ago
add a comment |
7
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>answered 11 hours ago
brkbrk
28.5k32143
add a comment |
7
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>answered 11 hours ago
brkbrk
28.5k32143
add a comment |
7
7
7
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>answered 11 hours ago
brkbrk
28.5k32143
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>answered 11 hours ago
brkbrk
28.5k32143
edited 11 hours ago
answered 11 hours ago
brkbrk
28.5k32143
answered 11 hours ago
brkbrk
28.5k32143
answered 11 hours ago
brkbrk
28.5k32143
28.5k32143
add a comment |
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>answered 11 hours ago
MamunMamun
29.1k71831
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>answered 11 hours ago
MamunMamun
29.1k71831
add a comment |
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>answered 11 hours ago
MamunMamun
29.1k71831
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>answered 11 hours ago
MamunMamun
29.1k71831
edited 11 hours ago
answered 11 hours ago
MamunMamun
29.1k71831
answered 11 hours ago
MamunMamun
29.1k71831
answered 11 hours ago
MamunMamun
29.1k71831
29.1k71831
add a comment |
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>answered 11 hours ago
ellipsisellipsis
7,7862929
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>answered 11 hours ago
ellipsisellipsis
7,7862929
add a comment |
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>answered 11 hours ago
ellipsisellipsis
7,7862929
$(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>answered 11 hours ago
ellipsisellipsis
7,7862929
edited 11 hours ago
answered 11 hours ago
ellipsisellipsis
7,7862929
answered 11 hours ago
ellipsisellipsis
7,7862929
answered 11 hours ago
ellipsisellipsis
7,7862929
7,7862929
add a comment |
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>answered 11 hours ago
Sarabjit SinghSarabjit Singh
8110
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>answered 11 hours ago
Sarabjit SinghSarabjit Singh
8110
add a comment |
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>answered 11 hours ago
Sarabjit SinghSarabjit Singh
8110
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 11 hours ago
Sarabjit SinghSarabjit Singh
8110
answered 11 hours ago
Sarabjit SinghSarabjit Singh
8110
answered 11 hours ago
Sarabjit SinghSarabjit Singh
8110
answered 11 hours ago
Sarabjit SinghSarabjit Singh
8110
8110
add a comment |
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');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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-add-class%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
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
Required, but never shown
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
Required, but never shown
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
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
1
Your
$(this)is not pointing to.box2as you expect– Mr. Alien
11 hours ago
@Mr.Alien It is what it actually does, pointing to
.box2, hence not working as expected as there is no.box1after it.– LGSon
11 hours ago
It would be great to add
$(document).ready(function(){, around your JQuery operations,– harish sharma
10 hours ago