4

I am trying to use jQuery & AJAX to replace the content of a div with content of a thumbnail div. Right now I have a featured section which has specific styling for its h2, h3 and p tags, as well as its video.

The thumbnails have the same markup as far as h2, h3, p tags and a video but each with their own specific css styling.

What I'm looking to do is on click of one of the thumbnails, it replaces the feature section with the information of the thumbnail and then puts the featured section down within the thumbnails.

I have it somewhat started but I can't seem to remove and add classes to the specific thumbnail without actually changing the css of the thumbnail below either.

Any help would be greatly appreciated.

I have created a jsfiddle with my current set up and what I have so far.

http://jsfiddle.net/drewbietron/YstAQ/

$(document).ready(function(){
   $("#one.promo-item").click(function(e){
       e.preventDefault();
       var content = $(this).html();
       $('.video-container-featured').replaceWith('<div class="video-container-promo" id="one">' +content+ '</div>'),
       $('#one.video-container-promo').addClass('.video-container-featured');
     });
 });

Thank you!

Improve this question
4
  • Hi, I've edited your question's title. The general consensus is that tags (such as jquery and ajax) do not need to be in your title because the tags on them will set the context anyway. Great question otherwise. Commented Nov 30, 2012 at 20:34
  • You seem to be using your ids multiple times. IDs need to be unique. This may be causing your problem. Commented Nov 30, 2012 at 20:41
  • I never target an individual id throughout my css or my Javascript. Even though id="one" is used more than once throughout my css, it's used on specific classes only once each. Commented Nov 30, 2012 at 21:30
  • An id must be unique in the document: w3.org/TR/html401/struct/global.html#h-7.5.2 Doesn't matter how you intend to use them. Commented Dec 2, 2012 at 13:57

1 Answer 1

Reset to default
1

Generally, you've got a lot more code than you need, to do what you want to do. Think simple and remember that child nodes inherit specificity from their parents.

You've got this:

<div class="promo-item" id="one">
    <div class="video-container-promo" id="one"><iframe src="#"></iframe></div>
    <h2>title...</h2>
    [...]

As mentioned above, you can't have duplicate ids. But even if you could, the nested id="one" is completely redundant. You would target that element with #one .video-container-promo. Likewise, you can target any nested child by starting your css selector with #one. (As an aside, numerically indexed items can be acessed in jQuery with the eq() method, no need to clutter your markup.)

Once you clean up your html, your jQuery code can essentially become a one-liner. To swap out the contents of one div with the contents of a clicked div, just do this:

$('.source'​​​​​).click(function(){
    $('#target').children().replaceWith($(this).clone().children());
});

The target, based on your example should probably be an id. The only other consideration is to be sure the element heirarchies you're slinging around match up.

Here's a simple jsfiddle showing how this might work: http://jsfiddle.net/joemaller/qxUvp/

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.