jQuery/JavaScript for-Loop and .append

Question

I started yesterday with jQuery and JavaScript and run into an error.

All I want is to place Ads randomly after an H1-Tag (so let's say there are 10 H1 on a page dived by 2 = 5 AdPosition) now add 5 AdBlocks after a randomly choosen H1.

Sounds pretty easy but I cant achieve this...: / because jQuery or myCode only paste one AdBlock.

JsFiddle: http://jsfiddle.net/byt3w4rri0r/eCBCK/ - working!

MyHTML:

<body>
<div id="content-inner">
    <h1 class="headline">Headline</h1>
    <h1 class="headline">Headline</h1>
    <h1 class="headline">Headline</h1>
    <h1 class="headline">Headline</h1>
    <h1 class="headline">Headline</h1>
    <h1 class="headline">Headline</h1>
    <h1 class="headline">Headline</h1>
    <h1 class="headline">Headline</h1>
    <h1 class="headline">Headline</h1>
    <h1 class="headline">Headline</h1>
</div>
</body>

MyJQUERY/JavaScript:

//count H1
var countH1 = parseFloat($("#content-inner h1").length)-1; //-1 because 0 is also a number!

//how often the ads should be displayed
var ad_count = Math.round(countH1 / 2);

//random helper
var min = 0;
var max = countH1;

//random position
for (counter = 0; counter < ad_count; counter++){
    var random_position = Math.round((Math.random() * (max - min)) + min);

    console.log("Random_Position:", random_position);

    // paste google-code

    if ($(".headline").hasClass('advertised') == true) {
        random_position++;

        console.log('already advertised!')

        if (random_position > countH1) {
            random_position--;
            }
    } else {
        $('h1:eq('+random_position+')').append('<div class="google_ad1"></div>');
        $('h1.headline').addClass('advertised');
        }
}

console.log("CountH1 -1, because 0=1, 1=2,....", countH1);
console.log(werbung_anzahl);
console.log(zufall_position);
console.log(counter);

devnull69 · Accepted Answer · 2012-10-02 09:55:48Z

1

With this line

if ($(".headline").hasClass('advertised') == true)

you are checking if any(!) of the .headline elements has already been advertised. And after the first step there is always one .headline that has been advertised, so this comparison will be true.

What you wanted to do: Check if the .headline with the current index has been advertised

if ($(".headline").eq(random_position).hasClass('advertised') == true)

On top of this, you are adding the class "advertised" to all(!) your h1.headline elements. This is what you wanted to do instead

$('h1.headline').eq(random_position).addClass('advertised');

EDIT: This is the full changed for loop from the latest fiddle at http://jsfiddle.net/eCBCK/19

for (counter = 0; counter < ad_count; counter++){
    var random_position = Math.round((Math.random() * (max - min)) + min);

    console.log("Random_Position:", random_position);

    // paste google-code

    if ($(".headline").eq(random_position).hasClass('advertised') == true) {
        counter--;

        console.log('already advertised!')


    } else {
        $('h1:eq('+random_position+')').append('<div class="google_ad1"></div>');
        $('h1.headline').eq(random_position).addClass('advertised');
        }
}

edited Oct 2, 2012 at 9:55

answered Oct 2, 2012 at 9:28

devnull69

16.6k9 gold badges55 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

leonhard.ortner Over a year ago

hi when i paste your codesnippet to my jsFiddle nothing happens... but when i paste it like: if ($(".headline").eq('+random_position+').hasClass('advertised') == true) it generates 3 adblock after oneH1 (not everyone)

devnull69 Over a year ago

I have updated the fiddle exactly as mentioned above and it works fine: jsfiddle.net/eCBCK/15

devnull69 Over a year ago

If you update the fiddle to this: jsfiddle.net/eCBCK/19 it will always show 5 ads for 10 headlines

Mark Walters · Accepted Answer · 2012-10-02 09:28:36Z

0

Someone correct me if i'm wrong, but you are adding the class "advertised" to all of your h1 elements, this means that on the second loop you are testing if advertised has already been added to the h1, which will now always be true and no more adds are appened

answered Oct 2, 2012 at 9:28

Mark Walters

12.4k6 gold badges36 silver badges48 bronze badges

1 Comment

leonhard.ortner Over a year ago

hi, yes thats true i will try to figure out whats wrong... thx for the hint

Barmar · Accepted Answer · 2012-10-02 09:36:48Z

0

Use jQuery's chaining feature:

$('h1:eq('+random_position+')').append('<div class="google_ad1"></div>').addClass('advertised');

This will only add the advertised class to the H1 that you just appended to.

answered Oct 2, 2012 at 9:36

Barmar

789k57 gold badges554 silver badges669 bronze badges

1 Comment

leonhard.ortner Over a year ago

hi, thx for your answer this is the solution for the hint given to my by "mark walters"! But now it happens that sometimes 2 ad-boxes appear after an H1...

Collectives™ on Stack Overflow

jQuery/JavaScript for-Loop and .append

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related