CODEWITHSUNDEEP
jqueryappend
Anna Riekic
Anna Riekic

Reputation: 738

jquery append text to parent/child id

I have a structure like this:

<div class="post">
 <div class="left">
  <div class="foo"><p><a href="#" id="clickme<?php echo $num;?>">blah</a></p></div>
</div>
<div class="right">
 <div class="text">blah blah blah blah</div>
</div>
 <p class="date">27/12/12</p>
</div>

this structure is repeated so each #clickme has a different number at the end

ie: #clickme2,#clickme3 etc using #clickme<?php echo $num;?>

What I am trying to do is have a message appear in the .date associated with the #clickme when someone clicks on #clickme

I have tried:

$('#clickme<?php echo $num;?>').parent().find('.date').append('<span id="msg">blah blah blah blah</span>');

Not working.

$('#clickme<?php echo $num;?>').closest('.post').find('.date').append('<span id="msg">blah blah blah blah</span>');

This one seems to work (kind of) but appends to the pages first .post's .date not the one that the #clickme is associated with.

please note <?php echo $num;?> is not the problem, thats working fine, its just the jquery.

UPDATE:

I have found that

$('#clickme<?php echo $num;?>').closest('.post').find('.date').append('<span id="msg">blah blah blah blah</span>');

does work but say I click on the third post it shows correctly but if then I click on any posts below that one ie 4th, 5th it remains to append to the third post and not the post associated with the click.

I also have this line aswell to fade the message in/out

$('#msg').fadeIn('fast').delay(1000).fadeOut('fast');

I have tried adding .remove() to the end after a delay but that stops it from working at all

$('#msg').fadeIn('fast').delay(1000).fadeOut('fast').delay(1000).remove();

full code

$('#clickme<?php echo $num;?>').closest('.post').find('.date').append('<span id="msg">blah blah blah blah</span>'); $('#msg').fadeIn('fast').delay(1000).fadeOut('fast');

Upvotes: 1

Views: 2234

Answers (2)

Anna Riekic
Anna Riekic

Reputation: 738

So I was resigned to just creating a simple $('body').append() "one size fits all" rather then what I wanted but I went away had some food came back later full, calm and rested and then boom lightbulb moment! stick a setTimeout > remove on it:

$(function() {
    $('[id^=<?php echo $num;?>]').closest('.post').find('.date').append('<span id="msg">blah blah blah blah</span>');
    $('#msg').fadeIn('fast').delay(2000).fadeOut('fast');

    setTimeout(function() {
      $('#msg').remove();
    }, 3000);
});

This removes the original appended message code after fadeOut ready for it to be appended again to the next .post .date associated with the next click.

I had previously tried adding .delay(2000).remove(); like I said in OP update but that didn't work and infact never does (why do I never remember this lol).

Thank you acdcjunior though for taking the time to help me!

Upvotes: 0

acdcjunior
acdcjunior

Reputation: 135762

You want to match every element with the id beginning with clickme. You can thus use the Attribute Starts With Selector ([name^="value"]):

$('[id^=clickme]').closest('.post').find('.date').append('<span id="alreadyvoted">You already voted for this post</span>');

Demo fiddle.

If you are looking for the click event, you can:

$('[id^=clickme]').click(function () {
    $(this).closest('.post').find('.date').append('<span id="alreadyvoted"> You already voted for this post</span>');
});

Demo here (click on the links).

Update:

As seen o the click example above, you shouldn't put the $('#clickme<?php echo $num;?>') selector inside a click() event. That will re-run the selector (and will return different elements than the clicked). Inside the click(), use this, or $(this).

To remove after the fadeIn/fadeOut, use a callback function. If you call remove(), it will remove right away, as you witnessed. The callback function can be added as below (look at the end):

$('#msg').fadeIn('fast').delay(1000).fadeOut('fast').delay(1000, function() { this.remove() });

To be more safe, it is better to keep a reference to the added span and call fadeIn/fadeOut directly to it, instead of reusing a selector (like $('#msg')):

$('[id^=clickme]').click(function () {
    var alreadyVotedSpan = $('<span id="msg"> You already voted for this post</span>');
    $(this).closest('.post').find('.date').append(alreadyVotedSpan);
    alreadyVotedSpan.fadeIn('fast').delay(1000).fadeOut('fast').delay(1000, function() { this.remove() });
});

See demo here (notice the use of $(this) inside the click()).

Upvotes: 1

Related Questions