CODEWITHSUNDEEP
javascriptjquery
olo
olo

Reputation: 5271

wrap content in a div and then appendTo

I'm trying to wrap appendcontent into image div, but got [object Object] returned.

 $("<div class=image>" + appendcontent + "</div>").appendTo($('.outside'));

How to put $(appendcontent) inside $("<div class=image></div>" )

online sample http://jsfiddle.net/PYQXa/5/

I know I can use html() but if I put html(), the slider won't work. that is the reason I need to keep the object.

Upvotes: 1

Views: 206

Answers (3)

Felix
Felix

Reputation: 38102

Some changes here:

  • Wrap your class inside quotes ' ' or double quotes " "

  • You need to use appendcontent.html() instead of appendcontent since appendcontent is a jQuery object:

  • Use appendTo('.outside') instead of appendTo($('.outside'))

So it look like this:

$("<div class='outside'>" + appendcontent.html() + "</div>").appendTo('.outside');

You can use append() then appendTo() instead:

$('<div class="image">').append(appendcontent).appendTo('.outside');

Updated Fiddle

Upvotes: 1

Pratik Joshi
Pratik Joshi

Reputation: 11693

I created jsfiddle here 

 http://jsfiddle.net/j5jdb/

jQuery

var $inside = $('.inside');
//$inside.hide();
var appendcontent = $inside.find('.slider').html();
//$(appendcontent).appendTo($('.outside'));

// $("<div class=outside>" + appendcontent + "</div>").appendTo($('.outside'));


// settings
var $slider = $('.slider'); // class or id of carousel slider
var $slide = 'li'; // could also use 'img' if you're not using a ul
var $transition_time = 1000; // 1 second
var $time_between_slides = 4000; // 4 seconds

function slides(){
  return $slider.find($slide);
}

slides().fadeOut();

// set active classes
slides().first().addClass('active');
slides().first().fadeIn($transition_time);

// auto scroll 
$interval = setInterval(
    function(){
      var $i = $slider.find($slide + '.active').index();

      slides().eq($i).removeClass('active');
      slides().eq($i).fadeOut($transition_time);

      if (slides().length == $i + 1) $i = -1; // loop to start

      slides().eq($i + 1).fadeIn($transition_time);
      slides().eq($i + 1).addClass('active');
    }
    , $transition_time +  $time_between_slides 
);

Upvotes: 1

Blender
Blender

Reputation: 298246

You can use .append:

$('<div class="image">').append(appendcontent).appendTo('.outside');

Or .wrap:

appendcontent.wrap('<div class="image">').appendTo('.outside');

It's also a common practice to prefix variables that contain jQuery objects with $ (e.g. $appendcontent).

Upvotes: 2

Related Questions