Question

我从XML文件生成数据，该文件输出某些字段（标题，描述，链接等）。但是我需要将链接包裹在其余字段周围。

See live view here，加载大约需要5秒钟。

当前的HTML结构：

<li>
   <h2>Trailblazing Tailor Made Tours</h2>
   <p>Sagittarius is pleased to provide European Study Tours with a new, refreshed and rejuvenated website allowing teachers and group leaders to source information, plan and book educational study tours with easy and confidence.</p>
   <a href="http://www.sagittarius-digital.com/News/our-news/trailblazing-tailor-made-tours.aspx">Read more</a>
   <p>Thu, 12 Dec 2013 12:00:00 GMT</p>
   <p>Category: Our News</p>
</li>

由以下内容生成：

var items = $(xml).find('item').map(function(){
            var $item = $(this);
            var array = ['<li class="ourNewsItem">'];
            array.push('<h2>' + $item.find('title').text() + '</h2>')
            array.push('<p>' + $item.find('description').text() + '</p>')
            array.push('<a href="' + $item.find('link').text() + '">Read more</a>')
            array.push('<p>' + $item.find('pubDate').text() + '</p>')
            array.push('<p>Category: ' + $item.find('category').text() + '</p>')
            array.push('</li>');
            return array

但我想像这样制作HTML输出：

<li>
<a href="http://www.sagittarius-digital.com/News/our-news/trailblazing-tailor-made-tours.aspx">
   <h2>Trailblazing Tailor Made Tours</h2>
   <p>Sagittarius is pleased to provide European Study Tours with a new, refreshed and rejuvenated website allowing teachers and group leaders to source information, plan and book educational study tours with easy and confidence.</p>
   <p>Thu, 12 Dec 2013 12:00:00 GMT</p>
   <p>Category: Our News</p>
</a>
</li>

以便<a>包围li

中的所有内容

Answer 1

var items = $(xml).find('item').map(function(){
            var $item = $(this);
            var array = ['<li class="ourNewsItem">'];
            array.push('<a href="' + $item.find('link').text() + '">');
            array.push('<h2>' + $item.find('title').text() + '</h2>');
            array.push('<p>' + $item.find('description').text() + '</p>');
            array.push('<p>' + $item.find('pubDate').text() + '</p>');
            array.push('<p>Category: ' + $item.find('category').text() + '</p>');
            array.push('</a>');
            array.push('</li>');
            return array;

然而出于性能原因，我不会这样做...而是我只返回一个字符串，它会远更好的性能，特别是如果你使用的是大数据集。如：

var items = $(xml).find('item').map(function(){
                var $item = $(this);
                var array = '<li class="ourNewsItem">';
                array += '<a href="' + $item.find('link').text() + '">';
                array += '<h2>' + $item.find('title').text() + '</h2>';
                array += '<p>' + $item.find('description').text() + '</p>';
                array += '<p>' + $item.find('pubDate').text() + '</p>';
                array += '<p>Category: ' + $item.find('category').text() + '</p>';
                array += '</a>';
                array += '</li>';
                return array;

Answer 2

只需更改锚元素标记即可覆盖整个li正文

var items = $(xml).find('item').map(function () {
    var $item = $(this);
    var array = ['<li class="ourNewsItem">'];
    array.push('<a href="' + $item.find('link').text() + '">');
    array.push('<h2>' + $item.find('title').text() + '</h2>')
    array.push('<p>' + $item.find('description').text() + '</p>')
    array.push('<p>' + $item.find('pubDate').text() + '</p>')
    array.push('<p>Category: ' + $item.find('category').text() + '</p>')
    array.push('</a>')
    array.push('</li>');
    return array

演示：Plunker

Answer 3

难道你不能相应地调整阵列吗？将锚点推进放入较高的索引，并在</li>关闭之前按下关闭锚点。

array.push('<a href="' + $item.find('link').text() + '">');
array.push('<h2>' + $item.find('title').text() + '</h2>');
array.push('<p>' + $item.find('description').text() + '</p>');
array.push('<p>' + $item.find('pubDate').text() + '</p>');
array.push('<p>Category: ' + $item.find('category').text() + '</p>');
array.push('</a>');

Answer 4

看起来很复杂，请尝试.wrapAll（）http://api.jquery.com/wrapall/并使用缩小到你的多个选择器UL

$('h2, p, a','ul.yourclass').wrapAll('<a href="path">');

围绕动态生成的数组项包装A标记

4 个答案: