jQuery to loop through elements with the same class
up vote
457
down vote
favorite
I have a load of divs with the class testimonial
and I want to use jquery to loop through them to check for each div if a specific condition is true. If it is true, it should perform an action.
Does anyone know how I would do this?
javascript jquery jquery-selectors
add a comment |
up vote
457
down vote
favorite
I have a load of divs with the class testimonial
and I want to use jquery to loop through them to check for each div if a specific condition is true. If it is true, it should perform an action.
Does anyone know how I would do this?
javascript jquery jquery-selectors
add a comment |
up vote
457
down vote
favorite
up vote
457
down vote
favorite
I have a load of divs with the class testimonial
and I want to use jquery to loop through them to check for each div if a specific condition is true. If it is true, it should perform an action.
Does anyone know how I would do this?
javascript jquery jquery-selectors
I have a load of divs with the class testimonial
and I want to use jquery to loop through them to check for each div if a specific condition is true. If it is true, it should perform an action.
Does anyone know how I would do this?
javascript jquery jquery-selectors
javascript jquery jquery-selectors
edited Dec 21 '12 at 12:49
Kees C. Bakker
17.5k1783171
17.5k1783171
asked Jan 19 '11 at 12:41
geoffs3310
5,039205681
5,039205681
add a comment |
add a comment |
14 Answers
14
active
oldest
votes
up vote
845
down vote
accepted
Use each: 'i
' is the postion in the array, obj
is the DOM object that you are iterating (can be accessed through the jQuery wrapper $(this)
as well).
$('.testimonial').each(function(i, obj) {
//test
});
Check the api reference for more information.
2
The function with i, obj parameters helps a lot. If just each was used then it was not iterating.
– darwindeeds
Jun 28 '12 at 16:22
1
@Darwindeeds correct! The function is used by the actual iterator to process each item. Returningfalse
will stop iteration.
– Kees C. Bakker
Jun 29 '12 at 7:09
107
It is worth pointing out, that "obj" will be the dom object, while $(this) is the jQuery object.
– AndreasT
Sep 11 '12 at 10:50
Cant we do jQuery(this 'ul li').length to get length of that elements ul li?
– techie_28
Sep 21 '12 at 6:09
11
+1 for suggesting$(this)
to access the object...obj
being DOM object doesn't allow to attach functions directly for exampleobj.empty()
– Fr0zenFyr
Nov 17 '15 at 7:34
|
show 4 more comments
up vote
105
down vote
try this...
$('.testimonial').each(function(){
//if statement here
// use $(this) to reference the current div in the loop
//you can try something like...
if(condition){
}
});
1
FYI:break;
will not break. You must usereturn false;
– Kolob Canyon
Dec 18 '17 at 20:18
add a comment |
up vote
40
down vote
It's pretty simple to do this without jQuery these days.
Without jQuery:
Just select the elements and use the .forEach()
method to iterate over them:
var testimonials = document.querySelectorAll('.testimonial');
Array.prototype.forEach.call(testimonials, function(elements, index) {
// conditional here.. access elements
});
add a comment |
up vote
36
down vote
Try this example
Html
<div class="testimonial" data-index="1">
Testimonial 1
</div>
<div class="testimonial" data-index="2">
Testimonial 2
</div>
<div class="testimonial" data-index="3">
Testimonial 3
</div>
<div class="testimonial" data-index="4">
Testimonial 4
</div>
<div class="testimonial" data-index="5">
Testimonial 5
</div>
When we want to access those divs
which has data-index
greater than 2
then we need this jquery.
$('div[class="testimonial"]').each(function(index,item){
if(parseInt($(item).data('index'))>2){
$(item).html('Testimonial '+(index+1)+' by each loop');
}
});
Working example fiddle
add a comment |
up vote
26
down vote
you can do it this way
$('.testimonial').each(function(index, obj){
//you can use this to access the current item
});
add a comment |
up vote
17
down vote
divs = $('.testimonial')
for(ind in divs){
div = divs[ind];
//do whatever you want
}
that doesn't give you the jquery objects though, just dom elements
– celwell
Feb 3 '14 at 19:25
@celwell can't expect jQuery to do everything for you. It is a matter of making your own jQuery Object$(ind)
.
– GoldBishop
Nov 17 '17 at 17:34
add a comment |
up vote
13
down vote
You can do this concisely using .filter
. The following example will hide all .testimonial divs containing the word "something":
$(".testimonial").filter(function() {
return $(this).text().toLowerCase().indexOf("something") !== -1;
}).hide();
add a comment |
up vote
13
down vote
jQuery's .eq() can help you traverse through elements with an indexed approach.
var testimonialElements = $(".testimonial");
for(var i=0; i<testimonialElements.length; i++){
var element = testimonialElements.eq(i);
//do something with element
}
1
this is the most efficient approach indeed.
– Amin Setayeshfar
Jan 20 '17 at 1:00
add a comment |
up vote
8
down vote
I may be missing part of the question, but I believe you can simply do this:
$('.testimonial').each(function() {
if(...Condition...) {
...Do Stuff...
}
}
add a comment |
up vote
8
down vote
With a simple for loop:
var testimonials= $('.testimonial');
for (var i = 0; i < testimonials.length; i++) {
// Using $() to re-wrap the element.
$(testimonials[i]).text('a');
}
add a comment |
up vote
7
down vote
Without jQuery updated
document.querySelectorAll('.testimonial').forEach(function (element, index) {
element.innerHTML = 'Testimonial ' + (index + 1);
});
<div class="testimonial"></div>
<div class="testimonial"></div>
almost the same answer is already here, I think you should edit existing
– Oleh Rybalchenko
Oct 3 '17 at 8:18
add a comment |
up vote
6
down vote
$('.testimonal').each(function(i,v){
if (condition) {
doSomething();
}
});
add a comment |
up vote
4
down vote
More precise:
$.each($('.testimonal'), function(index, value) {
console.log(index + ':' + value);
});
3
Why more precise?
– Opux
Jan 22 '16 at 15:36
This is nice if you like reading/writing from a more functional perspective.
– Sgnl
Aug 29 '17 at 21:18
add a comment |
up vote
2
down vote
In JavaScript ES6 using spread ...
operator
[...document.querySelectorAll('.testimonial')].forEach( el => {
el.style.color = 'red';
});
over a array-like collection given by Element.querySelectorAll()
[...document.querySelectorAll('.testimonial')].forEach( el => {
el.style.color = 'red';
const stuff = `Element ${el.tagName} with ID #${el.id} says: ${el.textContent}`;
console.log( stuff );
});
<p class="testimonial" id="1">This is some text</p>
<div class="testimonial" id="2">Lorem ipsum</div>
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',
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%2f4735342%2fjquery-to-loop-through-elements-with-the-same-class%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
14 Answers
14
active
oldest
votes
14 Answers
14
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
845
down vote
accepted
Use each: 'i
' is the postion in the array, obj
is the DOM object that you are iterating (can be accessed through the jQuery wrapper $(this)
as well).
$('.testimonial').each(function(i, obj) {
//test
});
Check the api reference for more information.
2
The function with i, obj parameters helps a lot. If just each was used then it was not iterating.
– darwindeeds
Jun 28 '12 at 16:22
1
@Darwindeeds correct! The function is used by the actual iterator to process each item. Returningfalse
will stop iteration.
– Kees C. Bakker
Jun 29 '12 at 7:09
107
It is worth pointing out, that "obj" will be the dom object, while $(this) is the jQuery object.
– AndreasT
Sep 11 '12 at 10:50
Cant we do jQuery(this 'ul li').length to get length of that elements ul li?
– techie_28
Sep 21 '12 at 6:09
11
+1 for suggesting$(this)
to access the object...obj
being DOM object doesn't allow to attach functions directly for exampleobj.empty()
– Fr0zenFyr
Nov 17 '15 at 7:34
|
show 4 more comments
up vote
845
down vote
accepted
Use each: 'i
' is the postion in the array, obj
is the DOM object that you are iterating (can be accessed through the jQuery wrapper $(this)
as well).
$('.testimonial').each(function(i, obj) {
//test
});
Check the api reference for more information.
2
The function with i, obj parameters helps a lot. If just each was used then it was not iterating.
– darwindeeds
Jun 28 '12 at 16:22
1
@Darwindeeds correct! The function is used by the actual iterator to process each item. Returningfalse
will stop iteration.
– Kees C. Bakker
Jun 29 '12 at 7:09
107
It is worth pointing out, that "obj" will be the dom object, while $(this) is the jQuery object.
– AndreasT
Sep 11 '12 at 10:50
Cant we do jQuery(this 'ul li').length to get length of that elements ul li?
– techie_28
Sep 21 '12 at 6:09
11
+1 for suggesting$(this)
to access the object...obj
being DOM object doesn't allow to attach functions directly for exampleobj.empty()
– Fr0zenFyr
Nov 17 '15 at 7:34
|
show 4 more comments
up vote
845
down vote
accepted
up vote
845
down vote
accepted
Use each: 'i
' is the postion in the array, obj
is the DOM object that you are iterating (can be accessed through the jQuery wrapper $(this)
as well).
$('.testimonial').each(function(i, obj) {
//test
});
Check the api reference for more information.
Use each: 'i
' is the postion in the array, obj
is the DOM object that you are iterating (can be accessed through the jQuery wrapper $(this)
as well).
$('.testimonial').each(function(i, obj) {
//test
});
Check the api reference for more information.
edited Dec 22 '15 at 13:17
answered Jan 19 '11 at 12:43
Kees C. Bakker
17.5k1783171
17.5k1783171
2
The function with i, obj parameters helps a lot. If just each was used then it was not iterating.
– darwindeeds
Jun 28 '12 at 16:22
1
@Darwindeeds correct! The function is used by the actual iterator to process each item. Returningfalse
will stop iteration.
– Kees C. Bakker
Jun 29 '12 at 7:09
107
It is worth pointing out, that "obj" will be the dom object, while $(this) is the jQuery object.
– AndreasT
Sep 11 '12 at 10:50
Cant we do jQuery(this 'ul li').length to get length of that elements ul li?
– techie_28
Sep 21 '12 at 6:09
11
+1 for suggesting$(this)
to access the object...obj
being DOM object doesn't allow to attach functions directly for exampleobj.empty()
– Fr0zenFyr
Nov 17 '15 at 7:34
|
show 4 more comments
2
The function with i, obj parameters helps a lot. If just each was used then it was not iterating.
– darwindeeds
Jun 28 '12 at 16:22
1
@Darwindeeds correct! The function is used by the actual iterator to process each item. Returningfalse
will stop iteration.
– Kees C. Bakker
Jun 29 '12 at 7:09
107
It is worth pointing out, that "obj" will be the dom object, while $(this) is the jQuery object.
– AndreasT
Sep 11 '12 at 10:50
Cant we do jQuery(this 'ul li').length to get length of that elements ul li?
– techie_28
Sep 21 '12 at 6:09
11
+1 for suggesting$(this)
to access the object...obj
being DOM object doesn't allow to attach functions directly for exampleobj.empty()
– Fr0zenFyr
Nov 17 '15 at 7:34
2
2
The function with i, obj parameters helps a lot. If just each was used then it was not iterating.
– darwindeeds
Jun 28 '12 at 16:22
The function with i, obj parameters helps a lot. If just each was used then it was not iterating.
– darwindeeds
Jun 28 '12 at 16:22
1
1
@Darwindeeds correct! The function is used by the actual iterator to process each item. Returning
false
will stop iteration.– Kees C. Bakker
Jun 29 '12 at 7:09
@Darwindeeds correct! The function is used by the actual iterator to process each item. Returning
false
will stop iteration.– Kees C. Bakker
Jun 29 '12 at 7:09
107
107
It is worth pointing out, that "obj" will be the dom object, while $(this) is the jQuery object.
– AndreasT
Sep 11 '12 at 10:50
It is worth pointing out, that "obj" will be the dom object, while $(this) is the jQuery object.
– AndreasT
Sep 11 '12 at 10:50
Cant we do jQuery(this 'ul li').length to get length of that elements ul li?
– techie_28
Sep 21 '12 at 6:09
Cant we do jQuery(this 'ul li').length to get length of that elements ul li?
– techie_28
Sep 21 '12 at 6:09
11
11
+1 for suggesting
$(this)
to access the object... obj
being DOM object doesn't allow to attach functions directly for example obj.empty()
– Fr0zenFyr
Nov 17 '15 at 7:34
+1 for suggesting
$(this)
to access the object... obj
being DOM object doesn't allow to attach functions directly for example obj.empty()
– Fr0zenFyr
Nov 17 '15 at 7:34
|
show 4 more comments
up vote
105
down vote
try this...
$('.testimonial').each(function(){
//if statement here
// use $(this) to reference the current div in the loop
//you can try something like...
if(condition){
}
});
1
FYI:break;
will not break. You must usereturn false;
– Kolob Canyon
Dec 18 '17 at 20:18
add a comment |
up vote
105
down vote
try this...
$('.testimonial').each(function(){
//if statement here
// use $(this) to reference the current div in the loop
//you can try something like...
if(condition){
}
});
1
FYI:break;
will not break. You must usereturn false;
– Kolob Canyon
Dec 18 '17 at 20:18
add a comment |
up vote
105
down vote
up vote
105
down vote
try this...
$('.testimonial').each(function(){
//if statement here
// use $(this) to reference the current div in the loop
//you can try something like...
if(condition){
}
});
try this...
$('.testimonial').each(function(){
//if statement here
// use $(this) to reference the current div in the loop
//you can try something like...
if(condition){
}
});
edited Jan 19 '11 at 12:48
answered Jan 19 '11 at 12:43
stephen776
5,4071158111
5,4071158111
1
FYI:break;
will not break. You must usereturn false;
– Kolob Canyon
Dec 18 '17 at 20:18
add a comment |
1
FYI:break;
will not break. You must usereturn false;
– Kolob Canyon
Dec 18 '17 at 20:18
1
1
FYI:
break;
will not break. You must use return false;
– Kolob Canyon
Dec 18 '17 at 20:18
FYI:
break;
will not break. You must use return false;
– Kolob Canyon
Dec 18 '17 at 20:18
add a comment |
up vote
40
down vote
It's pretty simple to do this without jQuery these days.
Without jQuery:
Just select the elements and use the .forEach()
method to iterate over them:
var testimonials = document.querySelectorAll('.testimonial');
Array.prototype.forEach.call(testimonials, function(elements, index) {
// conditional here.. access elements
});
add a comment |
up vote
40
down vote
It's pretty simple to do this without jQuery these days.
Without jQuery:
Just select the elements and use the .forEach()
method to iterate over them:
var testimonials = document.querySelectorAll('.testimonial');
Array.prototype.forEach.call(testimonials, function(elements, index) {
// conditional here.. access elements
});
add a comment |
up vote
40
down vote
up vote
40
down vote
It's pretty simple to do this without jQuery these days.
Without jQuery:
Just select the elements and use the .forEach()
method to iterate over them:
var testimonials = document.querySelectorAll('.testimonial');
Array.prototype.forEach.call(testimonials, function(elements, index) {
// conditional here.. access elements
});
It's pretty simple to do this without jQuery these days.
Without jQuery:
Just select the elements and use the .forEach()
method to iterate over them:
var testimonials = document.querySelectorAll('.testimonial');
Array.prototype.forEach.call(testimonials, function(elements, index) {
// conditional here.. access elements
});
edited Jan 24 '15 at 1:17
answered Jan 23 '15 at 4:07
Josh Crozier
152k35268221
152k35268221
add a comment |
add a comment |
up vote
36
down vote
Try this example
Html
<div class="testimonial" data-index="1">
Testimonial 1
</div>
<div class="testimonial" data-index="2">
Testimonial 2
</div>
<div class="testimonial" data-index="3">
Testimonial 3
</div>
<div class="testimonial" data-index="4">
Testimonial 4
</div>
<div class="testimonial" data-index="5">
Testimonial 5
</div>
When we want to access those divs
which has data-index
greater than 2
then we need this jquery.
$('div[class="testimonial"]').each(function(index,item){
if(parseInt($(item).data('index'))>2){
$(item).html('Testimonial '+(index+1)+' by each loop');
}
});
Working example fiddle
add a comment |
up vote
36
down vote
Try this example
Html
<div class="testimonial" data-index="1">
Testimonial 1
</div>
<div class="testimonial" data-index="2">
Testimonial 2
</div>
<div class="testimonial" data-index="3">
Testimonial 3
</div>
<div class="testimonial" data-index="4">
Testimonial 4
</div>
<div class="testimonial" data-index="5">
Testimonial 5
</div>
When we want to access those divs
which has data-index
greater than 2
then we need this jquery.
$('div[class="testimonial"]').each(function(index,item){
if(parseInt($(item).data('index'))>2){
$(item).html('Testimonial '+(index+1)+' by each loop');
}
});
Working example fiddle
add a comment |
up vote
36
down vote
up vote
36
down vote
Try this example
Html
<div class="testimonial" data-index="1">
Testimonial 1
</div>
<div class="testimonial" data-index="2">
Testimonial 2
</div>
<div class="testimonial" data-index="3">
Testimonial 3
</div>
<div class="testimonial" data-index="4">
Testimonial 4
</div>
<div class="testimonial" data-index="5">
Testimonial 5
</div>
When we want to access those divs
which has data-index
greater than 2
then we need this jquery.
$('div[class="testimonial"]').each(function(index,item){
if(parseInt($(item).data('index'))>2){
$(item).html('Testimonial '+(index+1)+' by each loop');
}
});
Working example fiddle
Try this example
Html
<div class="testimonial" data-index="1">
Testimonial 1
</div>
<div class="testimonial" data-index="2">
Testimonial 2
</div>
<div class="testimonial" data-index="3">
Testimonial 3
</div>
<div class="testimonial" data-index="4">
Testimonial 4
</div>
<div class="testimonial" data-index="5">
Testimonial 5
</div>
When we want to access those divs
which has data-index
greater than 2
then we need this jquery.
$('div[class="testimonial"]').each(function(index,item){
if(parseInt($(item).data('index'))>2){
$(item).html('Testimonial '+(index+1)+' by each loop');
}
});
Working example fiddle
edited Feb 19 '17 at 11:46
SaeX
7,43444969
7,43444969
answered Apr 13 '15 at 7:08
Manoj
3,45421646
3,45421646
add a comment |
add a comment |
up vote
26
down vote
you can do it this way
$('.testimonial').each(function(index, obj){
//you can use this to access the current item
});
add a comment |
up vote
26
down vote
you can do it this way
$('.testimonial').each(function(index, obj){
//you can use this to access the current item
});
add a comment |
up vote
26
down vote
up vote
26
down vote
you can do it this way
$('.testimonial').each(function(index, obj){
//you can use this to access the current item
});
you can do it this way
$('.testimonial').each(function(index, obj){
//you can use this to access the current item
});
edited Jan 19 '11 at 12:49
answered Jan 19 '11 at 12:44
Ghyath Serhal
5,57263750
5,57263750
add a comment |
add a comment |
up vote
17
down vote
divs = $('.testimonial')
for(ind in divs){
div = divs[ind];
//do whatever you want
}
that doesn't give you the jquery objects though, just dom elements
– celwell
Feb 3 '14 at 19:25
@celwell can't expect jQuery to do everything for you. It is a matter of making your own jQuery Object$(ind)
.
– GoldBishop
Nov 17 '17 at 17:34
add a comment |
up vote
17
down vote
divs = $('.testimonial')
for(ind in divs){
div = divs[ind];
//do whatever you want
}
that doesn't give you the jquery objects though, just dom elements
– celwell
Feb 3 '14 at 19:25
@celwell can't expect jQuery to do everything for you. It is a matter of making your own jQuery Object$(ind)
.
– GoldBishop
Nov 17 '17 at 17:34
add a comment |
up vote
17
down vote
up vote
17
down vote
divs = $('.testimonial')
for(ind in divs){
div = divs[ind];
//do whatever you want
}
divs = $('.testimonial')
for(ind in divs){
div = divs[ind];
//do whatever you want
}
answered Jan 19 '11 at 12:45
ikostia
3,20052234
3,20052234
that doesn't give you the jquery objects though, just dom elements
– celwell
Feb 3 '14 at 19:25
@celwell can't expect jQuery to do everything for you. It is a matter of making your own jQuery Object$(ind)
.
– GoldBishop
Nov 17 '17 at 17:34
add a comment |
that doesn't give you the jquery objects though, just dom elements
– celwell
Feb 3 '14 at 19:25
@celwell can't expect jQuery to do everything for you. It is a matter of making your own jQuery Object$(ind)
.
– GoldBishop
Nov 17 '17 at 17:34
that doesn't give you the jquery objects though, just dom elements
– celwell
Feb 3 '14 at 19:25
that doesn't give you the jquery objects though, just dom elements
– celwell
Feb 3 '14 at 19:25
@celwell can't expect jQuery to do everything for you. It is a matter of making your own jQuery Object
$(ind)
.– GoldBishop
Nov 17 '17 at 17:34
@celwell can't expect jQuery to do everything for you. It is a matter of making your own jQuery Object
$(ind)
.– GoldBishop
Nov 17 '17 at 17:34
add a comment |
up vote
13
down vote
You can do this concisely using .filter
. The following example will hide all .testimonial divs containing the word "something":
$(".testimonial").filter(function() {
return $(this).text().toLowerCase().indexOf("something") !== -1;
}).hide();
add a comment |
up vote
13
down vote
You can do this concisely using .filter
. The following example will hide all .testimonial divs containing the word "something":
$(".testimonial").filter(function() {
return $(this).text().toLowerCase().indexOf("something") !== -1;
}).hide();
add a comment |
up vote
13
down vote
up vote
13
down vote
You can do this concisely using .filter
. The following example will hide all .testimonial divs containing the word "something":
$(".testimonial").filter(function() {
return $(this).text().toLowerCase().indexOf("something") !== -1;
}).hide();
You can do this concisely using .filter
. The following example will hide all .testimonial divs containing the word "something":
$(".testimonial").filter(function() {
return $(this).text().toLowerCase().indexOf("something") !== -1;
}).hide();
answered Jan 19 '11 at 12:53
karim79
293k54378386
293k54378386
add a comment |
add a comment |
up vote
13
down vote
jQuery's .eq() can help you traverse through elements with an indexed approach.
var testimonialElements = $(".testimonial");
for(var i=0; i<testimonialElements.length; i++){
var element = testimonialElements.eq(i);
//do something with element
}
1
this is the most efficient approach indeed.
– Amin Setayeshfar
Jan 20 '17 at 1:00
add a comment |
up vote
13
down vote
jQuery's .eq() can help you traverse through elements with an indexed approach.
var testimonialElements = $(".testimonial");
for(var i=0; i<testimonialElements.length; i++){
var element = testimonialElements.eq(i);
//do something with element
}
1
this is the most efficient approach indeed.
– Amin Setayeshfar
Jan 20 '17 at 1:00
add a comment |
up vote
13
down vote
up vote
13
down vote
jQuery's .eq() can help you traverse through elements with an indexed approach.
var testimonialElements = $(".testimonial");
for(var i=0; i<testimonialElements.length; i++){
var element = testimonialElements.eq(i);
//do something with element
}
jQuery's .eq() can help you traverse through elements with an indexed approach.
var testimonialElements = $(".testimonial");
for(var i=0; i<testimonialElements.length; i++){
var element = testimonialElements.eq(i);
//do something with element
}
answered Dec 9 '13 at 6:02
Atharva
3,87331830
3,87331830
1
this is the most efficient approach indeed.
– Amin Setayeshfar
Jan 20 '17 at 1:00
add a comment |
1
this is the most efficient approach indeed.
– Amin Setayeshfar
Jan 20 '17 at 1:00
1
1
this is the most efficient approach indeed.
– Amin Setayeshfar
Jan 20 '17 at 1:00
this is the most efficient approach indeed.
– Amin Setayeshfar
Jan 20 '17 at 1:00
add a comment |
up vote
8
down vote
I may be missing part of the question, but I believe you can simply do this:
$('.testimonial').each(function() {
if(...Condition...) {
...Do Stuff...
}
}
add a comment |
up vote
8
down vote
I may be missing part of the question, but I believe you can simply do this:
$('.testimonial').each(function() {
if(...Condition...) {
...Do Stuff...
}
}
add a comment |
up vote
8
down vote
up vote
8
down vote
I may be missing part of the question, but I believe you can simply do this:
$('.testimonial').each(function() {
if(...Condition...) {
...Do Stuff...
}
}
I may be missing part of the question, but I believe you can simply do this:
$('.testimonial').each(function() {
if(...Condition...) {
...Do Stuff...
}
}
answered Jan 19 '11 at 12:45
David Smith
13.1k93360
13.1k93360
add a comment |
add a comment |
up vote
8
down vote
With a simple for loop:
var testimonials= $('.testimonial');
for (var i = 0; i < testimonials.length; i++) {
// Using $() to re-wrap the element.
$(testimonials[i]).text('a');
}
add a comment |
up vote
8
down vote
With a simple for loop:
var testimonials= $('.testimonial');
for (var i = 0; i < testimonials.length; i++) {
// Using $() to re-wrap the element.
$(testimonials[i]).text('a');
}
add a comment |
up vote
8
down vote
up vote
8
down vote
With a simple for loop:
var testimonials= $('.testimonial');
for (var i = 0; i < testimonials.length; i++) {
// Using $() to re-wrap the element.
$(testimonials[i]).text('a');
}
With a simple for loop:
var testimonials= $('.testimonial');
for (var i = 0; i < testimonials.length; i++) {
// Using $() to re-wrap the element.
$(testimonials[i]).text('a');
}
answered Jan 20 '17 at 15:00
Ismail Rubad
7191621
7191621
add a comment |
add a comment |
up vote
7
down vote
Without jQuery updated
document.querySelectorAll('.testimonial').forEach(function (element, index) {
element.innerHTML = 'Testimonial ' + (index + 1);
});
<div class="testimonial"></div>
<div class="testimonial"></div>
almost the same answer is already here, I think you should edit existing
– Oleh Rybalchenko
Oct 3 '17 at 8:18
add a comment |
up vote
7
down vote
Without jQuery updated
document.querySelectorAll('.testimonial').forEach(function (element, index) {
element.innerHTML = 'Testimonial ' + (index + 1);
});
<div class="testimonial"></div>
<div class="testimonial"></div>
almost the same answer is already here, I think you should edit existing
– Oleh Rybalchenko
Oct 3 '17 at 8:18
add a comment |
up vote
7
down vote
up vote
7
down vote
Without jQuery updated
document.querySelectorAll('.testimonial').forEach(function (element, index) {
element.innerHTML = 'Testimonial ' + (index + 1);
});
<div class="testimonial"></div>
<div class="testimonial"></div>
Without jQuery updated
document.querySelectorAll('.testimonial').forEach(function (element, index) {
element.innerHTML = 'Testimonial ' + (index + 1);
});
<div class="testimonial"></div>
<div class="testimonial"></div>
document.querySelectorAll('.testimonial').forEach(function (element, index) {
element.innerHTML = 'Testimonial ' + (index + 1);
});
<div class="testimonial"></div>
<div class="testimonial"></div>
document.querySelectorAll('.testimonial').forEach(function (element, index) {
element.innerHTML = 'Testimonial ' + (index + 1);
});
<div class="testimonial"></div>
<div class="testimonial"></div>
answered Oct 3 '17 at 7:50
KrisInception
9515
9515
almost the same answer is already here, I think you should edit existing
– Oleh Rybalchenko
Oct 3 '17 at 8:18
add a comment |
almost the same answer is already here, I think you should edit existing
– Oleh Rybalchenko
Oct 3 '17 at 8:18
almost the same answer is already here, I think you should edit existing
– Oleh Rybalchenko
Oct 3 '17 at 8:18
almost the same answer is already here, I think you should edit existing
– Oleh Rybalchenko
Oct 3 '17 at 8:18
add a comment |
up vote
6
down vote
$('.testimonal').each(function(i,v){
if (condition) {
doSomething();
}
});
add a comment |
up vote
6
down vote
$('.testimonal').each(function(i,v){
if (condition) {
doSomething();
}
});
add a comment |
up vote
6
down vote
up vote
6
down vote
$('.testimonal').each(function(i,v){
if (condition) {
doSomething();
}
});
$('.testimonal').each(function(i,v){
if (condition) {
doSomething();
}
});
answered Jan 19 '11 at 12:44
davin
32.8k76273
32.8k76273
add a comment |
add a comment |
up vote
4
down vote
More precise:
$.each($('.testimonal'), function(index, value) {
console.log(index + ':' + value);
});
3
Why more precise?
– Opux
Jan 22 '16 at 15:36
This is nice if you like reading/writing from a more functional perspective.
– Sgnl
Aug 29 '17 at 21:18
add a comment |
up vote
4
down vote
More precise:
$.each($('.testimonal'), function(index, value) {
console.log(index + ':' + value);
});
3
Why more precise?
– Opux
Jan 22 '16 at 15:36
This is nice if you like reading/writing from a more functional perspective.
– Sgnl
Aug 29 '17 at 21:18
add a comment |
up vote
4
down vote
up vote
4
down vote
More precise:
$.each($('.testimonal'), function(index, value) {
console.log(index + ':' + value);
});
More precise:
$.each($('.testimonal'), function(index, value) {
console.log(index + ':' + value);
});
answered Jan 21 '16 at 15:27
Atif Tariq
1,7881424
1,7881424
3
Why more precise?
– Opux
Jan 22 '16 at 15:36
This is nice if you like reading/writing from a more functional perspective.
– Sgnl
Aug 29 '17 at 21:18
add a comment |
3
Why more precise?
– Opux
Jan 22 '16 at 15:36
This is nice if you like reading/writing from a more functional perspective.
– Sgnl
Aug 29 '17 at 21:18
3
3
Why more precise?
– Opux
Jan 22 '16 at 15:36
Why more precise?
– Opux
Jan 22 '16 at 15:36
This is nice if you like reading/writing from a more functional perspective.
– Sgnl
Aug 29 '17 at 21:18
This is nice if you like reading/writing from a more functional perspective.
– Sgnl
Aug 29 '17 at 21:18
add a comment |
up vote
2
down vote
In JavaScript ES6 using spread ...
operator
[...document.querySelectorAll('.testimonial')].forEach( el => {
el.style.color = 'red';
});
over a array-like collection given by Element.querySelectorAll()
[...document.querySelectorAll('.testimonial')].forEach( el => {
el.style.color = 'red';
const stuff = `Element ${el.tagName} with ID #${el.id} says: ${el.textContent}`;
console.log( stuff );
});
<p class="testimonial" id="1">This is some text</p>
<div class="testimonial" id="2">Lorem ipsum</div>
add a comment |
up vote
2
down vote
In JavaScript ES6 using spread ...
operator
[...document.querySelectorAll('.testimonial')].forEach( el => {
el.style.color = 'red';
});
over a array-like collection given by Element.querySelectorAll()
[...document.querySelectorAll('.testimonial')].forEach( el => {
el.style.color = 'red';
const stuff = `Element ${el.tagName} with ID #${el.id} says: ${el.textContent}`;
console.log( stuff );
});
<p class="testimonial" id="1">This is some text</p>
<div class="testimonial" id="2">Lorem ipsum</div>
add a comment |
up vote
2
down vote
up vote
2
down vote
In JavaScript ES6 using spread ...
operator
[...document.querySelectorAll('.testimonial')].forEach( el => {
el.style.color = 'red';
});
over a array-like collection given by Element.querySelectorAll()
[...document.querySelectorAll('.testimonial')].forEach( el => {
el.style.color = 'red';
const stuff = `Element ${el.tagName} with ID #${el.id} says: ${el.textContent}`;
console.log( stuff );
});
<p class="testimonial" id="1">This is some text</p>
<div class="testimonial" id="2">Lorem ipsum</div>
In JavaScript ES6 using spread ...
operator
[...document.querySelectorAll('.testimonial')].forEach( el => {
el.style.color = 'red';
});
over a array-like collection given by Element.querySelectorAll()
[...document.querySelectorAll('.testimonial')].forEach( el => {
el.style.color = 'red';
const stuff = `Element ${el.tagName} with ID #${el.id} says: ${el.textContent}`;
console.log( stuff );
});
<p class="testimonial" id="1">This is some text</p>
<div class="testimonial" id="2">Lorem ipsum</div>
[...document.querySelectorAll('.testimonial')].forEach( el => {
el.style.color = 'red';
const stuff = `Element ${el.tagName} with ID #${el.id} says: ${el.textContent}`;
console.log( stuff );
});
<p class="testimonial" id="1">This is some text</p>
<div class="testimonial" id="2">Lorem ipsum</div>
[...document.querySelectorAll('.testimonial')].forEach( el => {
el.style.color = 'red';
const stuff = `Element ${el.tagName} with ID #${el.id} says: ${el.textContent}`;
console.log( stuff );
});
<p class="testimonial" id="1">This is some text</p>
<div class="testimonial" id="2">Lorem ipsum</div>
edited Jan 4 at 22:18
answered Jan 4 at 22:12
Roko C. Buljan
125k21187222
125k21187222
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f4735342%2fjquery-to-loop-through-elements-with-the-same-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