Question

I need to dynamically add a div around items then run a second bit to make the item rotate.

So far I can add the div but the second part doesn’t load like it needs to.

<div id="ContentFeed">
<div class="newsItem">Text</div>
<div class="newsItem">Text</div>
<div class="newsItem">Text</div>
<div class="newsItem">Text</div>
<div class="newsItem">Text</div>
</div>

<script>$('#ContentFeed .newsItem').wrapAll('<div id="slider" />');</script>


    <div id="ContentFeed">
     <div id="slider">
        <div class="newsItem">Text</div>
        <div class="newsItem">Text</div>
        <div class="newsItem">Text</div>
        <div class="newsItem">Text</div>
        <div class="newsItem">Text</div>
    </div>
   </div>

<script>
$(function(){
    $('#slider').bxSlider({
        auto: false,
        displaySlideQty: 6,
        moveSlideQty: 6,
        pagerType: short,
        pager: true
  });
});
</script>

Any idea how to get the second part to see the dynamically added div?

Answer 1

You may be trying to add the dynamic div too early, try wrapping the first bit of jQuery code in the same document.ready event handler:

$(function(){
    $('#ContentFeed .newsItem').wrapAll('<div id="slider" />');
    $('#slider').bxSlider({
        auto            : false,
        displaySlideQty : 6,
        moveSlideQty    : 6,
        pagerType       : short,
        pager           : true
    });
});

You can verify if this is the issue by inspecting the DOM to see if the #slider element is actually being added to the DOM.