输出文本没有以正确的格式显示

Question

Here is the JavaScript I use to animate slider (fade effect) of the content I read from database:

<script language="javascript">
jQuery(document).ready(function ()
{
    var terms = ["span_1","span_2"];
    var i = 0;

    function rotateTerm() {
        jQuery("#text-content").fadeOut(200, function() {
          jQuery(this).text(jQuery('#text-slider .'+terms[i]).html()+i).fadeIn(200);
        });
        jQuery("#title-content").fadeOut(200, function() {
          jQuery(this).text(jQuery('#title-slider .'+terms[i]).html()+i).fadeIn(200);
           i == terms.length - 1 ? i=0 : i++;
        });
    }
    rotateTerm();
    setInterval(rotateTerm, 1000);   
});
</script>

And here is the PHP code I use:

<?php
    if (!empty($testLst)) :     
        $num=1; 
        foreach($testLst as $key=>$item):
             $item->slug = $item->id;
             $item->catslug = $item->catid ;

?><div id="hidden-content" style="display:none;">       
    <div id="title-slider"> 
        <span class="<?php echo 'span_'.$num; ?>">
            <h4><a href="<?php echo JRoute::_(ContentHelperRoute::getArticleRoute($item->id, $item->catid)); ?>">
                <?php echo $item->title; ?></a>
            </h4>
        </span>
    </div>
<div id="text-slider">
    <span class="<?php echo 'span_'.$num; ?>">
        <p>
            <?php
                $concat=array_slice(explode(' ',$item->introtext),0,20);
                $concat=implode(' ',$concat);
                echo $concat."...";
            ?>
        </p>
    </span>
</div></div>
<a href="<?php echo JRoute::_(ContentHelperRoute::getArticleRoute($item->id, $item->catid)); ?>" title="Learn more" class="learnMore">Learn more &gt;&gt;</a></p>
<?php
    $num++;
    endforeach;
    endif;
?>

<div id="title-content">
</div>
<div id="text-content">
</div>

And here is a JSFiddle page reproducing what I would like to do.

My problem is that I am getting data that still has HTML tags, however I would like the output to have my CSS styles.

Answer 1

You could clone the node, and set that to be the new content of the target elements, to keep everything in jQuery objects, but personally, I'd use the .outerHTML property.

I've updated your fiddle to show you what I mean: I've changed the .text(...set content here) to .html() , because we're injecting HTML content. Then, I added [0] at the end of your selector, to return the raw element reference, which gives access to all standard JS properties and methods an element has, and just went ahead and fetched the outerHTML ... easy-peasy