Javascript 使用Jquery将XML转换为HTML

我是Jquery的新手，正在这里寻求帮助。这个问题很简单，但我正在详细解释它，因为我指的是实现我的目标的多个项目

1） 我在我的站点中使用了以下Jquery插件

这个插件使用

modernizer.custom.34978.js

和下面的Javascript来实现模糊

$(function() {

                var $container  = $('#ib-container'),
                    $articles   = $container.children('article'),
                    timeout;

                $articles.on( 'mouseenter', function( event ) {

                    var $article    = $(this);
                    clearTimeout( timeout );
                    timeout = setTimeout( function() {

                        if( $article.hasClass('active') ) return false;

                        $articles.not( $article.removeClass('blur').addClass('active') )
                                 .removeClass('active')
                                 .addClass('blur');

                    }, 65 );

                });

                $container.on( 'mouseleave', function( event ) {

                    clearTimeout( timeout );
                    $articles.removeClass('active blur');

                });

            });

2） 以下html标记正用于此目的

<section class="ib-container" id="ib-container">
                <article>
                    <header>
                        <h3><a target="_blank" href="http://tympanus.net/codrops/2011/12/08/25-examples-of-perfect-color-combinations-in-web-design/">25 Examples of Perfect Color Combinations in Web Design</a></h3>
                        <span>December 8, 2011 by Gisele Muller</span>
                    </header>
                    <p>Today we will show you some examples of websites that are using beautiful and inspiring color combinations that match perfectly and create an eye candy...</p>
                </article>
</section>

2011年12月8日吉赛尔·穆勒
今天，我们将向您展示一些网站的例子，这些网站使用美丽而鼓舞人心的颜色组合，完美匹配，创造出令人眼花缭乱的视觉效果

我想先走一步，使用使用TSQL自动生成的xml文件更新这个html。其思想是，当用户使用web表单提交详细信息时，使用存储过程将其转换为xml，然后使用以下jquery将其转换为html

$(document).ready(function()
{
  $.ajax({
    type: "GET",
    url: "http://localhost:5732/js/ycube.xml",
    dataType: "xml",
    success: parseXml
  });
});

function parseXml(xml) {
    var list = $('#ib-container');

     $(xml).find("article").each(function (index, element) {

        var field = $(element)

        var link = field.find('a').text()
        var span = field.find('span').text()
         var para = field.find('p').text()

      .append('<article><header><h3><a target="_blank" href="http://tympanus.net/codrops/2011/12/08/25-examples-of-perfect-color-combinations-in-web-design/">' + link + '</a></h3><span>'+span+ '</span></header><p>'+ para + '</p></article>')

    ;
    })
}

$（文档）.ready（函数（）
{
$.ajax({
键入：“获取”，
url:“http://localhost:5732/js/ycube.xml",
数据类型：“xml”，
成功：parseXml
});
});
函数解析xml（xml）{
变量列表=$（“#ib容器”）；
$（xml）.find（“article”）.each（函数（索引，元素）{
变量字段=$（元素）
var link=field.find（'a'）.text（）
var span=field.find（'span'）.text（）
var para=field.find（'p'）.text（）
.append（''+span+''+para+'
'））
;
})
}

这是我的xml文件，它是使用SQLserver查询创建的

?xml version="1.0" encoding="utf-8" ?>
<sepx>
        <article>
                    <header>
                        <h3><a target="_blank" href="http://tympanus.net/codrops/2011/12/08/25-examples-of-perfect-color-combinations-in-web-design/">25 Examples of Perfect Color Combinations in Web Design</a></h3>
                        <span>December 8, 2011 by Gisele Muller</span>
                    </header>
                    <p>Today we will show you some examples of websites that are using beautiful and inspiring color combinations that match perfectly and create an eye candy...</p>
                </article>
</sepx>

？xml version=“1.0”encoding=“utf-8”>
2011年12月8日吉赛尔·穆勒
今天，我们将向您展示一些网站的例子，这些网站使用美丽而鼓舞人心的颜色组合，完美匹配，创造出令人眼花缭乱的视觉效果

我一直都很成功，一旦调用jquery，html标签就会像预期的那样被填满。所有主要的样式也会像预期的那样被应用，但是使用上面提到的jquery插件（参考bullet 1）应该产生的模糊效果不会发生

当我手动放置html代码时（请参阅项目符号2），pluing正在按预期工作

有人能在这里帮助我理解为什么当我从XML中提取细节时，只有模糊效果不起作用，但是当手动放置HTML时，同样的效果很好吗？我在所有主流浏览器中都尝试过这一点

---

我想再次重申，我是一个自学Jquery和HTML的人，上面所有的代码片段都是从多个地方获取的，并根据我的需要进行了修改。

在绑定

mouseenter

处理程序时，您通过AJAX调用检索的文章并不存在。由于无法将处理程序绑定到不存在的DOM对象，因此可以使用委派（更好的做法），或者在AJAX调用后重新绑定处理程序（同样有效，但效率不高）

代表团示例：

$container.on('mouseenter', 'article', function (event) {
    var $article = $(this),
        $articles = $article.siblings();
    clearTimeout(timeout);
    timeout = setTimeout(function () {
        if ($article.hasClass('active')) return false;
        $articles.not($article.removeClass('blur').addClass('active'))
            .removeClass('active')
            .addClass('blur');
    }, 65);
});

重新绑定示例：

$(document).ready(function () {
    var bindMouseEnterHandler = function bindMouseEnterHandler() {
            var $container = $('#ib-container'),
                $articles = $container.children('article'),
                timeout;
            $articles.unbind('mouseenter').on('mouseenter', function (event) {
                var $article = $(this);
                clearTimeout(timeout);
                timeout = setTimeout(function () {
                    if ($article.hasClass('active')) return false;
                    $articles.not($article.removeClass('blur').addClass('active'))
                        .removeClass('active')
                        .addClass('blur');
                }, 65);
            });
            $container.on('mouseleave', function (event) {
                clearTimeout(timeout);
                $articles.removeClass('active blur');
            });
        },
        parseXml = function parseXml(xml) {
            var list = $('#ib-container');
            $(xml).find("article").each(function (index, element) {
                var field = $(element)
                var link = field.find('a').text()
                var span = field.find('span').text()
                var para = field.find('p').text()
                list.append('<article><header><h3><a target="_blank" href="http://tympanus.net/codrops/2011/12/08/25-examples-of-perfect-color-combinations-in-web-design/">' + link + '</a></h3><span>' + span + '</span></header><p>' + para + '</p></article>');
                bindMouseEnterHandler();
            })
        };
    $.ajax({
        type: "GET",
        url: "http://localhost:5732/js/ycube.xml",
        dataType: "xml",
        success: parseXml
    });
});

$（文档）.ready（函数（）{
var bindMouseEnterHandler=函数bindMouseEnterHandler（）{
var$container=$（“#ib container”），
$articles=$container.children（'article'），
超时；
$articles.unbind（'mouseenter'）。on（'mouseenter'，函数（事件）{
var$article=$（本）；
clearTimeout（超时）；
超时=设置超时（函数（）{
if（$article.hasClass（'active'））返回false；
$articles.not（$article.removeClass（'blur'）。addClass（'active'））
.removeClass（'活动'）
.addClass（“模糊”）；
}, 65);
});
$container.on（'mouseleave'，函数（事件）{
clearTimeout（超时）；
$articles.removeClass（'activeblur'）；
});
},
parseXml=函数parseXml（xml）{
变量列表=$（“#ib容器”）；
$（xml）.find（“article”）.each（函数（索引，元素）{
变量字段=$（元素）
var link=field.find（'a'）.text（）
var span=field.find（'span'）.text（）
var para=field.find（'p'）.text（）
列表。追加（'+span+''+para+'
'）；
bindMouseEnterHandler（）；
})
};
$.ajax({
键入：“获取”，
url:“http://localhost:5732/js/ycube.xml",
数据类型：“xml”，
成功：parseXml
});
});

非常感谢皮特的精彩解释。现在开始工作了