Question

我想我可以在没有代码的情况下解释自己，所以为了简洁起见，我们走了：

我正在使用jquery从xml中提取数据并将其放在页面上的ul中，每个xml条目都是li。这很棒！

但是，我之后尝试做的是使用innerfade插件在每个li之间制作一个简单的动画。它不起作用，因为它仍然只是加载静态列表，每个项目都可见（而如果innerfade工作，它只显示第一个....然后淡入第二个，等等）

然而，这并不是一个内在的问题，因为如果我手动将列表添加到页面中（而不是用jquery注入它），那么innerfade工作正常。

我对DOM脚本相对较新，所以我觉得我在这里遗漏了一些东西。我不太确定jQuery是如何对所有内容进行排序的，而且我在搜索引擎友好的方式上无法用语言表达我的问题，所以我就是这样。

是否有可能让jquery从xml中提取数据，然后将其注入页面，然后让innerfade工作它的魔力？或者我是否以错误的方式思考这个问题？

xml代码：

$.ajax({
    type: "GET",
    url: "xml/playlist.xml",
    dataType: "xml",
    success: function(xml) {
        $(xml).find('song').each(function(){
            var name = $(this).attr('title');
            var date = $(this).attr('artist');
            var message = $(this).attr('path');
            $('<li></li>').html('<span id="an_name">'+name+'</span><span id="an_date">'+date+'</span><span id="an_message">'+message+'</span>').appendTo('#anniversary');

        });
    }
});

内部代码：

<script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(
        function(){ 
            jQuery('#anniversary').innerfade({
            speed: 1000,
            timeout: 5000,
            type: 'sequence',
        });
    });

Answer 1

是的，将内部淡化代码放在完整函数中。

$.ajax({
    type: "GET",
    url: "xml/playlist.xml",
    dataType: "xml",
    complete: function(){ 
            jQuery('#anniversary').innerfade({
            speed: 1000,
            timeout: 5000,
            type: 'sequence',
        });,

    success: function(xml) {
        $(xml).find('song').each(function(){
            var name = $(this).attr('title');
            var date = $(this).attr('artist');
            var message = $(this).attr('path');
            $('<li></li>').html('<span id="an_name">'+name+'</span><span id="an_date">'+date+'</span><span id="an_message">'+message+'</span>').appendTo('#anniversary');

        });
    }
});

Answer 2

var name = $(this).attr('title');

您应该使用.find（）方法而不是.attr（）

jQuery XML加载然后是innerfade效果

2 个答案: