Question

I have this code that creates a little speech bubble. I am going to have a few dozen of them on an upcoming website, but the code to create the div’s is a little too much for what I’d like to write out EVERY time I’d like to add a bubble.

What I’d like is to use jQuery, with the .html() attribute to create most of the code for me. I am still learning jQuery so any help with this would be a great source of learning for me.

Here is current HTML:

<div id="bubbleWrapper">
    <div class="bubbleTop"></div>
    <div class="bubbleText">ryan jay</div>
</div>

I have a stylesheet for all of this, but it’s not important right now.

What I’d like to be able to do, is when I want to add a bubble on the page, I’ll just be able to use something like this:

<div class="bubble">ryan jay</div>

And the jQuery would recreate the first code example. Is this something that is possible? I am a bit lost on how I would do this.

Thank for your your time and help!

Answer 1

Try this:

$(".bubble").each(function() {
    $wrapper = $("<div></div>").addClass("bubbleWrapper");
    $top = $("<div></div>").addClass("bubbleTop");
    $(this).addClass("bubbleText").wrap($wrapper).before($top);
});

Note I gave the wrapping div a class of bubbleWrapper, not an id as this will enable you to have multiple versions of this throughout your page without repeating the id, which would render the page invalid.

It’s also worth noting that you would be completely cutting off this functionality from anyone who does not have javascript enabled. A better approach to DRY principles would be to create a function in your server-side code where you pass a string (to be used within the bubbleText div) and it generates this HTML for you.