0

I would like my jQuery script to only return ONLY the top node it finds instead of iterating through all the nodes. What do I change in my jQuery script to accomplish that? I know it has to do with the each(function) {} but i don't know exactly what should change. Thanks in advance!

jQuery Code:

$.ajax({
url: 'xml/timeline.xml',
dataType: 'xml',
success: function(data) {
    $(data).find('channel item').each(function() {
        var fbFeedWrapper = $('<div/>').addClass('fb-feed-wrapper');
        var fbFeedItem = $('<div />').addClass('fb-feed-item');
        $('.socialmedia-list#simlearn').append(fbFeedWrapper);
        fbFeedWrapper.append(fbFeedItem);

        var url = $(this).find('link').text();
        var title = $(this).find('title').text();           
        fbFeedItem.append($('<h1/>').html("<a href='" + url + "'>" + title + "</a>"));                
        var fbItemIcon = $('<div />').addClass('fb-item-icon');
        fbFeedItem.append(fbItemIcon);
        var description = $(this).find('description').text();
                        if (description.length > 80) {
                            description = description.substr(0, 80) + "...";
                        }
        fbFeedItem.append($('<div/>').addClass('fb-item-details').html(description));                            

    })
}


});

XML File format:

<channel>
<item> // <-- If i Only want the top <item> node returned what should i do?
    <title></title>
    <link></link>
    <description></description>
</item>
<item>
    <title></title>
    <link></link>
    <description></description>
</item>
<item>
    <title></title>
    <link></link>
    <description></description>
</item>

2 Answers 2

3

Instead of using .each(); simply find the first of the matched elements. Assign a variable with this object and then change of the this references from inside the .each() to be the name of the variable.

Example (In the example I name the variable self) :

Change the line :

$(data).find('channel item').each(function() {

to be :

var self = $(data).find('channel item').first();

Then change all of the occurrences of this to be self. Also remove the ending brace and bracket of the .each function (}))

$.ajax({
    url: 'xml/timeline.xml',
    dataType: 'xml',
    success: function (data) {
        var self = $(data).find('channel item').first();
        var fbFeedWrapper = $('<div/>').addClass('fb-feed-wrapper');
        var fbFeedItem = $('<div />').addClass('fb-feed-item');
        $('.socialmedia-list#simlearn').append(fbFeedWrapper);
        fbFeedWrapper.append(fbFeedItem);

        var url = $(self).find('link').text();
        var title = $(self).find('title').text();
        fbFeedItem.append($('<h1/>').html("<a href='" + url + "'>" + title + "</a>"));
        var fbItemIcon = $('<div />').addClass('fb-item-icon');
        fbFeedItem.append(fbItemIcon);
        var description = $(self).find('description').text();
        if (description.length > 80) {
            description = description.substr(0, 80) + "...";
        }
        fbFeedItem.append($('<div/>').addClass('fb-item-details').html(description));
    }
});
Sign up to request clarification or add additional context in comments.

Comments

1

Try this:

$(data).find('channel item[0]')
    //--------------------^^^-----add [0] to this

or with :first:

$(data).find('channel item:first')

or with :eq():

$(data).find('channel item:eq(0)')

Even you can try this:

$(data).find('item:eq(0)')

2 Comments

When I tried replacing $(data).find('channel item').each(function() { with $(data).find('channel item[1]') the jquery won't execute
$(data).find('channel item:eq(0)') worked for me, but $(data).find('channel item[0]') did not work for me

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.