Count number of li element and add class2019 Community Moderator ElectionHow do I detect a click outside an...
Professor being mistaken for a grad student
A single argument pattern definition applies to multiple-argument patterns?
As a new Ubuntu desktop 18.04 LTS user, do I need to use ufw for a firewall or is iptables sufficient?
Brexit - No Deal Rejection
Is it normal that my co-workers at a fitness company criticize my food choices?
I am confused as to how the inverse of a certain function is found.
Meme-controlled people
How to write cleanly even if my character uses expletive language?
Do I need to be arrogant to get ahead?
Are Roman Catholic priests ever addressed as pastor
Python if-else code style for reduced code for rounding floats
New passport but visa is in old (lost) passport
Why do tuner card drivers fail to build after kernel update to 4.4.0-143-generic?
What is the relationship between relativity and the Doppler effect?
Official degrees of earth’s rotation per day
Why is the President allowed to veto a cancellation of emergency powers?
How to deal with taxi scam when on vacation?
Recruiter wants very extensive technical details about all of my previous work
Fastest way to pop N items from a large dict
How to explain that I do not want to visit a country due to personal safety concern?
Describing a chess game in a novel
et qui - how do you really understand that kind of phraseology?
How to terminate ping <dest> &
Non-trivial topology where only open sets are closed
Count number of li element and add class
2019 Community Moderator ElectionHow do I detect a click outside an element?Add table row in jQueryHow do I check if an element is hidden in jQuery?How to change an element's class with JavaScript?Event binding on dynamically created elements?Creating a div element in jQueryHow can I select an element with multiple classes in jQuery?How to move an element into another element?How 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.
javascript jquery html css
edited Mar 11 at 10:27
Helenesh
1,2901123
asked Mar 11 at 5:38
kk kkkk kk
1447
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 jquery html css
edited Mar 11 at 10:27
Helenesh
1,2901123
asked Mar 11 at 5:38
kk kkkk kk
1447
2
Your$(this)is not pointing to.box2as you expect
– Mr. Alien
Mar 11 at 5:41
@Mr.Alien It is what it actually does, pointing to.box2, hence not working as expected as there is no.box1after it.
– LGSon
Mar 11 at 5:59
It would be great to add$(document).ready(function(){, around your JQuery operations,
– harish sharma
Mar 11 at 6:38
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 jquery html css
edited Mar 11 at 10:27
Helenesh
1,2901123
asked Mar 11 at 5:38
kk kkkk kk
1447
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 Mar 11 at 10:27
Helenesh
1,2901123
asked Mar 11 at 5:38
kk kkkk kk
1447
edited Mar 11 at 10:27
Helenesh
1,2901123
asked Mar 11 at 5:38
kk kkkk kk
1447
edited Mar 11 at 10:27
Helenesh
1,2901123
edited Mar 11 at 10:27
Helenesh
1,2901123
edited Mar 11 at 10:27
Helenesh
1,2901123
1,2901123
asked Mar 11 at 5:38
kk kkkk kk
1447
asked Mar 11 at 5:38
kk kkkk kk
1447
asked Mar 11 at 5:38
kk kkkk kk
1447
1447
2
Your$(this)is not pointing to.box2as you expect
– Mr. Alien
Mar 11 at 5:41
@Mr.Alien It is what it actually does, pointing to.box2, hence not working as expected as there is no.box1after it.
– LGSon
Mar 11 at 5:59
It would be great to add$(document).ready(function(){, around your JQuery operations,
– harish sharma
Mar 11 at 6:38
add a comment |
2
Your$(this)is not pointing to.box2as you expect
– Mr. Alien
Mar 11 at 5:41
@Mr.Alien It is what it actually does, pointing to.box2, hence not working as expected as there is no.box1after it.
– LGSon
Mar 11 at 5:59
It would be great to add$(document).ready(function(){, around your JQuery operations,
– harish sharma
Mar 11 at 6:38
2
2
Your
$(this) is not pointing to .box2 as you expect– Mr. Alien
Mar 11 at 5:41
Your
$(this) is not pointing to .box2 as you expect– Mr. Alien
Mar 11 at 5:41
@Mr.Alien It is what it actually does, pointing to
.box2, hence not working as expected as there is no .box1 after it.– LGSon
Mar 11 at 5:59
@Mr.Alien It is what it actually does, pointing to
.box2, hence not working as expected as there is no .box1 after it.– LGSon
Mar 11 at 5:59
It would be great to add
$(document).ready(function(){, around your JQuery operations,– harish sharma
Mar 11 at 6:38
It would be great to add
$(document).ready(function(){, around your JQuery operations,– harish sharma
Mar 11 at 6:38
add a comment |
5 Answers
5
active
oldest
votes
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 Mar 11 at 5:40
Andy HoffmanAndy Hoffman
8,72131839
This explanation is wrong, even ifbox2was beforebox1,$(this)evaluates to divbox2and looks for.box1 liamongbox2's descendants
– barbsan
Mar 11 at 10:17
1
@barbsan Thanks for the feedback. I've updated the example with a more thorough explanation.
– Andy Hoffman
Mar 11 at 10:34
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>answered Mar 11 at 5:41
brkbrk
28.9k32143
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>answered Mar 11 at 5:42
MamunMamun
29.4k71931
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>answered Mar 11 at 5:42
ellipsisellipsis
8,0062929
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 Mar 11 at 5:45
Sarabjit SinghSarabjit Singh
14812
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
});
}
});
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
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 Mar 11 at 5:40
Andy HoffmanAndy Hoffman
8,72131839
This explanation is wrong, even ifbox2was beforebox1,$(this)evaluates to divbox2and looks for.box1 liamongbox2's descendants
– barbsan
Mar 11 at 10:17
1
@barbsan Thanks for the feedback. I've updated the example with a more thorough explanation.
– Andy Hoffman
Mar 11 at 10:34
add a comment |
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 Mar 11 at 5:40
Andy HoffmanAndy Hoffman
8,72131839
This explanation is wrong, even ifbox2was beforebox1,$(this)evaluates to divbox2and looks for.box1 liamongbox2's descendants
– barbsan
Mar 11 at 10:17
1
@barbsan Thanks for the feedback. I've updated the example with a more thorough explanation.
– Andy Hoffman
Mar 11 at 10:34
add a comment |
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 Mar 11 at 5:40
Andy HoffmanAndy Hoffman
8,72131839
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 Mar 11 at 5:40
Andy HoffmanAndy Hoffman
8,72131839
edited Mar 11 at 10:34
answered Mar 11 at 5:40
Andy HoffmanAndy Hoffman
8,72131839
answered Mar 11 at 5:40
Andy HoffmanAndy Hoffman
8,72131839
answered Mar 11 at 5:40
Andy HoffmanAndy Hoffman
8,72131839
8,72131839
This explanation is wrong, even ifbox2was beforebox1,$(this)evaluates to divbox2and looks for.box1 liamongbox2's descendants
– barbsan
Mar 11 at 10:17
1
@barbsan Thanks for the feedback. I've updated the example with a more thorough explanation.
– Andy Hoffman
Mar 11 at 10:34
add a comment |
This explanation is wrong, even ifbox2was beforebox1,$(this)evaluates to divbox2and looks for.box1 liamongbox2's descendants
– barbsan
Mar 11 at 10:17
1
@barbsan Thanks for the feedback. I've updated the example with a more thorough explanation.
– Andy Hoffman
Mar 11 at 10:34
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
Mar 11 at 10:17
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
Mar 11 at 10:17
1
1
@barbsan Thanks for the feedback. I've updated the example with a more thorough explanation.
– Andy Hoffman
Mar 11 at 10:34
@barbsan Thanks for the feedback. I've updated the example with a more thorough explanation.
– Andy Hoffman
Mar 11 at 10:34
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>answered Mar 11 at 5:41
brkbrk
28.9k32143
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>answered Mar 11 at 5:41
brkbrk
28.9k32143
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>answered Mar 11 at 5:41
brkbrk
28.9k32143
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 Mar 11 at 5:41
brkbrk
28.9k32143
edited Mar 11 at 5:42
answered Mar 11 at 5:41
brkbrk
28.9k32143
answered Mar 11 at 5:41
brkbrk
28.9k32143
answered Mar 11 at 5:41
brkbrk
28.9k32143
28.9k32143
add a comment |
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>answered Mar 11 at 5:42
MamunMamun
29.4k71931
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>answered Mar 11 at 5:42
MamunMamun
29.4k71931
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>answered Mar 11 at 5:42
MamunMamun
29.4k71931
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 Mar 11 at 5:42
MamunMamun
29.4k71931
edited Mar 11 at 5:54
answered Mar 11 at 5:42
MamunMamun
29.4k71931
answered Mar 11 at 5:42
MamunMamun
29.4k71931
answered Mar 11 at 5:42
MamunMamun
29.4k71931
29.4k71931
add a comment |
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>answered Mar 11 at 5:42
ellipsisellipsis
8,0062929
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>answered Mar 11 at 5:42
ellipsisellipsis
8,0062929
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>answered Mar 11 at 5:42
ellipsisellipsis
8,0062929
$(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 Mar 11 at 5:42
ellipsisellipsis
8,0062929
edited Mar 11 at 6:27
answered Mar 11 at 5:42
ellipsisellipsis
8,0062929
answered Mar 11 at 5:42
ellipsisellipsis
8,0062929
answered Mar 11 at 5:42
ellipsisellipsis
8,0062929
8,0062929
add a comment |
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 Mar 11 at 5:45
Sarabjit SinghSarabjit Singh
14812
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 Mar 11 at 5:45
Sarabjit SinghSarabjit Singh
14812
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 Mar 11 at 5:45
Sarabjit SinghSarabjit Singh
14812
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 Mar 11 at 5:45
Sarabjit SinghSarabjit Singh
14812
answered Mar 11 at 5:45
Sarabjit SinghSarabjit Singh
14812
answered Mar 11 at 5:45
Sarabjit SinghSarabjit Singh
14812
answered Mar 11 at 5:45
Sarabjit SinghSarabjit Singh
14812
14812
add a comment |
add a comment |
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.
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
2
Your
$(this)is not pointing to.box2as you expect– Mr. Alien
Mar 11 at 5:41
@Mr.Alien It is what it actually does, pointing to
.box2, hence not working as expected as there is no.box1after it.– LGSon
Mar 11 at 5:59
It would be great to add
$(document).ready(function(){, around your JQuery operations,– harish sharma
Mar 11 at 6:38