Count number of li element and addclass2019 Community Moderator ElectionValidate decimal numbers in...
Why couldn't the separatists legally leave the Republic?
Having the player face themselves after the mid-game
Can we track matter through time by looking at different depths in space?
Vocabulary for giving just numbers, not a full answer
Why restrict private health insurance?
Crossing a border with an infant of a different citizenship
Is there a difference between equilibrium and steady state?
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?
Should I take out a loan for a friend to invest on my behalf?
Can I negotiate a patent idea for a raise, under French law?
Power Strip for Europe
Does "Until when" sound natural for native speakers?
Source permutation
Is it possible to avoid unpacking when merging Association?
School performs periodic password audits. Is my password compromised?
Is this Paypal Github SDK reference really a dangerous site?
Why does cron require MTA for logging?
Do I really need to have a scientific explanation for my premise?
Outlet with 3 sets of wires
Why does Central Limit Theorem break down in my simulation?
Confusion about Complex Continued Fraction
Expressing logarithmic equations without logs
What problems would a superhuman have whose skin is constantly hot?
Which classes are needed to have access to every spell in the PHB?
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.
javascript html css
asked 1 hour ago
kk kkkk kk
926
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
asked 1 hour ago
kk kkkk kk
926
1
Your$(this)is not pointing to.box2as 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.box1after it.
– LGSon
51 mins ago
@Mr.Alien Aconsole.log($(this)shows that$(this)is pointing to.box2. If you reverse the HTML structure ofbox1andbox2and change theJavaScripttoreturn 'list' + $(this).find('+ .box1 li').length;, you'll see it's working properly using the adjacent sibling selector added to the start offind.
– Andy Hoffman
46 mins ago
It would be great to add$(document).ready(function(){, around your JQuery operations,
– harish sharma
13 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
asked 1 hour ago
kk kkkk 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
javascript html css
asked 1 hour ago
kk kkkk kk
926
asked 1 hour ago
kk kkkk kk
926
asked 1 hour ago
kk kkkk kk
926
asked 1 hour ago
kk kkkk kk
926
asked 1 hour ago
kk kkkk kk
926
926
1
Your$(this)is not pointing to.box2as 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.box1after it.
– LGSon
51 mins ago
@Mr.Alien Aconsole.log($(this)shows that$(this)is pointing to.box2. If you reverse the HTML structure ofbox1andbox2and change theJavaScripttoreturn 'list' + $(this).find('+ .box1 li').length;, you'll see it's working properly using the adjacent sibling selector added to the start offind.
– Andy Hoffman
46 mins ago
It would be great to add$(document).ready(function(){, around your JQuery operations,
– harish sharma
13 mins ago
add a comment |
1
Your$(this)is not pointing to.box2as 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.box1after it.
– LGSon
51 mins ago
@Mr.Alien Aconsole.log($(this)shows that$(this)is pointing to.box2. If you reverse the HTML structure ofbox1andbox2and change theJavaScripttoreturn 'list' + $(this).find('+ .box1 li').length;, you'll see it's working properly using the adjacent sibling selector added to the start offind.
– Andy Hoffman
46 mins ago
It would be great to add$(document).ready(function(){, around your JQuery operations,
– harish sharma
13 mins ago
1
1
Your
$(this) is not pointing to .box2 as you expect– Mr. Alien
1 hour ago
Your
$(this) is not pointing to .box2 as you expect– Mr. Alien
1 hour ago
@Mr.Alien It is what it actually does, pointing to
.box2, hence not working as expected as there is no .box1 after it.– LGSon
51 mins ago
@Mr.Alien It is what it actually does, pointing to
.box2, hence not working as expected as there is no .box1 after it.– LGSon
51 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
46 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
46 mins ago
It would be great to add
$(document).ready(function(){, around your JQuery operations,– harish sharma
13 mins ago
It would be great to add
$(document).ready(function(){, around your JQuery operations,– harish sharma
13 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>answered 1 hour ago
Andy HoffmanAndy 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>answered 1 hour ago
brkbrk
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>answered 1 hour ago
MamunMamun
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>answered 1 hour ago
ellipsisellipsis
7,6982929
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 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
});
}
});
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-addclass%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
5 Answers
5
active
oldest
votes
5 Answers
5
active
oldest
votes
active
oldest
votes
active
oldest
votes
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>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>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>answered 1 hour ago
Andy HoffmanAndy 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>answered 1 hour ago
Andy HoffmanAndy Hoffman
8,07631538
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
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
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>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>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>answered 1 hour ago
brkbrk
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>answered 1 hour ago
brkbrk
28.4k32143
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
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
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>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>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>answered 1 hour ago
MamunMamun
29k71831
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 1 hour ago
MamunMamun
29k71831
edited 57 mins ago
answered 1 hour ago
MamunMamun
29k71831
answered 1 hour ago
MamunMamun
29k71831
answered 1 hour ago
MamunMamun
29k71831
29k71831
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 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>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>answered 1 hour ago
ellipsisellipsis
7,6982929
$(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 1 hour ago
ellipsisellipsis
7,6982929
edited 23 mins ago
answered 1 hour ago
ellipsisellipsis
7,6982929
answered 1 hour ago
ellipsisellipsis
7,6982929
answered 1 hour ago
ellipsisellipsis
7,6982929
7,6982929
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 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>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>answered 1 hour ago
Sarabjit SinghSarabjit 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 SinghSarabjit Singh
1169
answered 1 hour ago
Sarabjit SinghSarabjit Singh
1169
answered 1 hour ago
Sarabjit SinghSarabjit Singh
1169
answered 1 hour ago
Sarabjit SinghSarabjit Singh
1169
1169
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-addclass%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
1 hour ago
@Mr.Alien It is what it actually does, pointing to
.box2, hence not working as expected as there is no.box1after it.– LGSon
51 mins ago
@Mr.Alien A
console.log($(this)shows that$(this)is pointing to.box2. If you reverse the HTML structure ofbox1andbox2and change theJavaScripttoreturn 'list' + $(this).find('+ .box1 li').length;, you'll see it's working properly using the adjacent sibling selector added to the start offind.– Andy Hoffman
46 mins ago
It would be great to add
$(document).ready(function(){, around your JQuery operations,– harish sharma
13 mins ago