CODEWITHSUNDEEP
jquery
Francesca
Francesca

Reputation: 28148

Wrapping an A tag around array items dynamically generated

I am generating data from an XML file which outputs certain fields (title, description, link etc). However I need to wrap the link around the rest of the fields.

See live view here, it takes about 5 seconds to load.

Current HTML structure:

<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>

Which is generated from:

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

But I want to make the HTML output like this:

<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>

So that the <a> wraps around all the content in the li

Upvotes: 0

Views: 164

Answers (4)

Sibbo
Sibbo

Reputation: 78

Seems complicated, try .wrapAll() http://api.jquery.com/wrapall/ and use multiple selectors narrowed down to you UL

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

Upvotes: 0

Chris Dixon
Chris Dixon

Reputation: 9167

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;

However I wouldn't do it this way for performance reasons... instead I'd just return a string, it'll be far better for performance, especially if you're using a big dataset. Such as:

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;

Upvotes: 3

Sterling Archer
Sterling Archer

Reputation: 22405

Couldn't you just adjust your array accordingly? Place the anchor push into the higher index, and have a closing anchor pushed before your </li> is closed.

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>');

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388406

Just change the anchor element markup to cover the entire li body

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

Demo: Plunker

Upvotes: 0

Related Questions