Finding CSS class in jQuery object that has been populated from XML

I have populated an asynchronous ajax function which grabs data from an xml:

$.ajax({
    type: "GET",
    url: "/content/en_GB/banner-data.xml",
    dataType: "xml",
    success: function(xml) {
        $(xml).find('item').each(function(){
        var section = $(this).attr('section');
        var title = $(this).attr('title');
        var tabid = $(this).attr('tabid');
        var image = $(this).attr('image');

        var banner = $("<div class='banner-textarea'></div>");

        banner.append($("<span class开发者_如何学Go='hidden panelButtonLabel'></span>").html(section));
        banner.append($("<h2></h2>").html(title));
        $(this).find('section').each(function(){
        var alink = $(this).attr('link');
        var desc = $(this).text();
        banner.append($("<a href='"+alink+"'></a>&nbsp;|&nbsp;").html(desc));
        });

        //banner = $("<div class='banner-textarea'></div>").html(banner);
        banner = $("<div id='tab"+tabid+"' class='mini-banner-img'></div>").html(banner);
        banner = $("<li class='panelsLi'></li>").html(banner);

But i also have to amend an existing script so the i can apply carousel features to the "banner" object.

Im having problems grabbing the panel class in :

$(".panelsCarousel").each(function(){

//init
var divObj=$(this);

var intervalHnd=null;   //timer handler

// get the widget params
var params=divObj.getJsonComment();
var duration=params.duration||6000;                                     

var ul=divObj.find("ul");
var LIs=banner.find("panelsLi"); < FAILS HERE

the last line does not find the class. Can you help?

Many thanks

You are missing dot (.) for a class, instead of:

var LIs=banner.find("panelsLi");

Try:

var LIs=banner.find(".panelsLi");

See:

jQuery Class Selector

Your current jQuery selector panelsLi actually targets elements with that tag, rather than that class (i.e. tags). To target a class, you need to start the selector with a .:

var LIs=banner.find(".panelsLi");  <-- classes start with .

Update: I can't actually see any code which appends the panelsLi to the document? When the ajax update is rendered, do you actually see the panelsLi displayed on the screen?

The banner variable in your code currently only exists within the scope of your success ajax callback function - it wont be available to other functions outside of this scope, unless you declare the variable outside of the scope, or you add the panel to the document and then use jQuery to get a new reference to it later.