CODEWITHSUNDEEP
jquery
ijjo
ijjo

Reputation: 525

how to get jquery object, then manipulate the dom elements inside it

Ok I know jquery can do this pretty simply, but digging around I'm a bit confused whether I should be using replaceWith, filters, html, text, clone etc!

Here's what I'm doing. I'm using jquery UI tabs and whenever I create a new tab I need to use the html from another place on the dom but slightly modify it before I use it for the new tab. So it looks like this:

_$chatTabs = $("#dvChatManager").tabs({
    selected: 0,
    tabTemplate: "<li><a href='#{href}'>#{label}</a> <span style=\"position:absolute;right:0px;\" class='ui-icon ui-icon-close'>Remove Tab</span></li>",
    add: function (event, ui){
        var html = $('.dvChatBoxWrapper', $('#dvChat-' + _activeGID)).clone();
        $(ui.panel).append(html);
        initTabs();
    }
});

So in the "add" part, you can see that I clone another div and append it to the panel. But before I append it to the panel, I need to clear out some divs within variable html and possibly change other html things. I'm a bit confused about the best approach. Also I'm open to another approach of using other divs on the dom as templates!

Upvotes: 1

Views: 878

Answers (1)

Andy
Andy

Reputation: 30135

First off I'd advise to put a $ sign in front of jquery object names, so it's easier to keep track of them. :)

You can access elements in your current jquery object via find() and manipulate them to you needs:

var $html = $('.dvChatBoxWrapper', $('#dvChat-' + _activeGID)).clone();
$html.find('.someDiv').remove();
$html.find('.someOtherDiv').html('new content');
..etc..

Upvotes: 1

Related Questions