CODEWITHSUNDEEP
jqueryhtml
Danie Oberholzer
Danie Oberholzer

Reputation: 21

Adding content after last child in list and not after entire list using jQuery

I'm using a jQuery plugin that auto maximizes list items and then minimizes them with a button.

The plugin is https://github.com/jawinn/Hide-Max-List-Items-Expander-jQuery-Plugin/blob/master/hideMaxListItem.js

The plugin automatically adds a "Expand" button after a list. I need to have the expand button added after the last child in the list. This list is also generated from values in a database and individual list items cannot be edited.

The moreHTML variable contains the HTML that's inserted into the page to create the "expand" button.

The code used for sending the variable:

$(this).after(op.moreHTML);

This is what i pass in the variable :

'moreHTML':'<li class="maxlist-more"><a href="#"></a></li>'

How do I get the "More" button added to the last item in the list instead of adding it after the entire list?

Edit For clarification, I would like to have the "Read More" button to be the last list item.

Upvotes: 0

Views: 1935

Answers (2)

PlantTheIdea
PlantTheIdea

Reputation: 16359

You want .append().

$(this).append(op.moreHTML);

This will add the op.moreHTML element onto whatever $(this) is. If you wanted to be a bit shmancier (if for some reason, $(this) didn't work for your code).

var $list = $('#WhateverListNameIs'),
    $item = $list.find('li'),
    len = $item.length-1;

$item.eq(len).append(op.moreHTML);

Not tested, but I that should add the HTML to the last list item. If done in a function, this should also be dynamic.

Upvotes: 1

Anthony Grist
Anthony Grist

Reputation: 38345

Assuming that this is your <ul> element, you want to use .append() rather than .after():

$(this).append(op.moreHTML);

Upvotes: 0

Related Questions