Zelfde functie meerdere keren uitvoeren
Wat kan ik doen om dezelfde jquery code uit te voeren maar het resultaat anders is?
HTML:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<div class="art-container">
<div class="price">
<span>119.00</span>
</div>
<div class="ship-text">Voor 22:00 besteld = morgen in huis <span class="changed">(2,50)</span></div>
</div>
<div class="art-container">
<div class="price">
<span>19.00</span>
</div>
<div class="ship-text">Voor 22:00 besteld = morgen in huis <span class="changed">(2,50)</span></div>
</div>
<div class="price">
<span>119.00</span>
</div>
<div class="ship-text">Voor 22:00 besteld = morgen in huis <span class="changed">(2,50)</span></div>
</div>
<div class="art-container">
<div class="price">
<span>19.00</span>
</div>
<div class="ship-text">Voor 22:00 besteld = morgen in huis <span class="changed">(2,50)</span></div>
</div>
JQUERY:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
$(document).ready(function(){
var obj = $('.art-container').find('.price span');
if(obj.text() > 20){
$('.ship-text .changed').text('(gratis)');
}else{
$('.ship-text .changed').text('(2,50)');
}
});
var obj = $('.art-container').find('.price span');
if(obj.text() > 20){
$('.ship-text .changed').text('(gratis)');
}else{
$('.ship-text .changed').text('(2,50)');
}
});
Wat nu gebeurt is dat de jquery in verwarring is omdat de HTML van beide precies het zelfde is.
Het resultaat:
Code (php)
1
2
3
4
2
3
4
119.00
Voor 22:00 besteld = morgen in huis (2,50)
19.00
Voor 22:00 besteld = morgen in huis (2,50)
Voor 22:00 besteld = morgen in huis (2,50)
19.00
Voor 22:00 besteld = morgen in huis (2,50)
Wat het zou moeten zijn is:
Code (php)
1
2
3
4
2
3
4
119.00
Voor 22:00 besteld = morgen in huis (gratis)
19.00
Voor 22:00 besteld = morgen in huis (2,50)
Voor 22:00 besteld = morgen in huis (gratis)
19.00
Voor 22:00 besteld = morgen in huis (2,50)
De code moet dus meerdere keren worden uitgevoerd en dan per container.
Wie kan mij helpen?
Gr. Yoeri
Code (php)
1
console.log(obj.text());
En zie de fout.
Dank voor de reacties, ik heb verschillende dingen geprobeerd maar hij heeft continu dezelfde waardes.
Nu heb ik een each functie gemaakt zodat hij de elementen afgaat, maar zelfs dat werkt niet.
JQUERY:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
$(document).ready(function(){
$('.art-container').each(function(){
var obj = $('.price span');
if(obj.text() > 20){
$(this).parent().find('.ship-text .changed').text('(gratis)');
}else{
$(this).parent().find('.ship-text .changed').text('(2,50)');
}
});
});
$('.art-container').each(function(){
var obj = $('.price span');
if(obj.text() > 20){
$(this).parent().find('.ship-text .changed').text('(gratis)');
}else{
$(this).parent().find('.ship-text .changed').text('(2,50)');
}
});
});
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$('.price').each(function () {
if (parseInt($(this).text()) > 20) {
$(this).parent().find('.changed').text('(gratis)');
} else {
$(this).parent().find('.changed').text('(2,50)');
}
});
<div class="art-container">
<div class="price">119.00</div>
<div class="ship-text">Voor 22:00 besteld = morgen in huis
<span class="changed">(2,50)</span>
</div>
</div>
<div class="art-container">
<div class="price">19.00</div>
<div class="ship-text">Voor 22:00 besteld = morgen in huis
<span class="changed">(2,50)</span>
</div>
</div>
if (parseInt($(this).text()) > 20) {
$(this).parent().find('.changed').text('(gratis)');
} else {
$(this).parent().find('.changed').text('(2,50)');
}
});
<div class="art-container">
<div class="price">119.00</div>
<div class="ship-text">Voor 22:00 besteld = morgen in huis
<span class="changed">(2,50)</span>
</div>
</div>
<div class="art-container">
<div class="price">19.00</div>
<div class="ship-text">Voor 22:00 besteld = morgen in huis
<span class="changed">(2,50)</span>
</div>
</div>
Aldus -> https://jsfiddle.net/ygs2tdy3/
Gewijzigd op 25/09/2015 23:23:20 door Pieter R
