jQuery Adding text to a list AND removing them

[Apothem]

This might be clearer if you use Twitter.
In Twitter, if you post a message, your message slides into the message list. Also, if you click Home (Sidebar), it will find new tweets and merge it into the message list. What I want to know is how do you make it so that jQuery will merge lists together + sort them AND remove older messages afterward.

E.g: Current list:
<li value="100">abc</li>
<li value="68">abc</li>
<li value="32">abc</li>
<li value="5">abc</li>

Queried new:
<li value="80">bcd</li>

New list should become:
<li value="100">abc</li>
<li value="80">bcd</li>
<li value="68">abc</li>
<li value="32">abc</li>

[Iszak]

Okay, well I made something although it's not exactly what you wanted, it's similar and with some editing I'm sure you can acheive what you want. Although the way I've done this I believe isn't the best and effecient way, it gets the job done. Sorry I couldn't help anymore.

HTML

<ul id="list">
  <li value="100">100</li>
  <li value="32">32</li>
  <li value="68">68</li>
  <li value="5">5</li>
</ul>

<input id="submit" type="submit" value="Add List Item">
<input id="value" type="text" value="20">

JavaScript

function sortDesc(a, b)
{
  return (b - a);
}

$('#submit').click(function(){
  var value = $('#value').val();

  $('#list').append('<li value="'+value+'">'+value+'</li>\n');

  list = new Array();

  jQuery.each($('#list > li'), function(){
    list = list.concat($(this).attr('value'))
  });

  list.sort(sortDesc);

  $('#list').children().remove();

  jQuery.each(list, function(){
    $('#list').append('<li value="'+this+'">'+this+'</li>\n');
  });
});

Should be noted I don't believe the value attribute is valid.. so maybe look into something else?

Preview: http://pastebin.me/49dda6757604b

[Eldarrion]

Originally Posted by Iszak

Okay, well I made something although it's not exactly what you wanted, it's similar and with some editing I'm sure you can acheive what you want. Although the way I've done this I believe isn't the best and effecient way, it gets the job done. Sorry I couldn't help anymore.

Should be noted I don't believe the value attribute is valid.. so maybe look into something else?

Preview: http://pastebin.me/49dda6757604b

The value attribute is valid, but deprecated:

http://www.w3schools.com/tags/tag_li.asp

It should work, and likely will, though you never know when some browser update might crash the website due to the browser not supporting it anymore.

[Apothem]

Well, how do I add an attribute that is valid and can be used as a reference to sorting?

[Fumigator]

You should be able to simply define a Javascript array and use it to do the sorting, then dump the array into the DOM (in the form of your <li> tags) after the sort. The array will remain defined for the life of the page

[Apothem]

Yes but what is another way to store a value into a tag? For instance, if I wanted to store the text "300 API? OK" to a <div>, how would I do it?

[Eldarrion]

Originally Posted by Pykex

Yes but what is another way to store a value into a tag? For instance, if I wanted to store the text "300 API? OK" to a <div>, how would I do it?

I guess if you _must_ you can use the title attribute to store info. Or well, in a <div> you can just stick what you want in the div contents, but eh... I guess that won't work if there's something else in there. All in all... one way to do it is making a hidden input field inside the div that would contain your data, but that might be too much trouble.

[Fumigator]

I'm not sure I get the point of trying to turn HTML elements into storage areas. I'm not saying it shouldn't be done, but if there were a point to doing it, I'd love to know what that point is.

[Apothem]

One thing it can be used for is for resizing a bunch of images, as such:

<img src="http://link/to/my/image1.jpg" original="1280px" />
<img src="http://link/to/my/image2.jpg" original="2000px" />
<img src="http://link/to/my/image3.jpg" original="1600px" />
.... and so on.

All those images are extremely big so I use jQuery to resize them back to about 700px. As a result, I also allow the user to click the image to resize to its original width... which requires me to somehow log the original width.

That's kind of why I want to know how to store data.... INCLUDING if it's something which has no innerHTML (or $.html()).

[Fumigator]

I feel like we're going in circles because you can simply use Javascript variables and arrays to store stuff.

[Eldarrion]

I'd personally have to agree with Fumigator there that storing the information in question in an array would be much easier to do than pulling it out of attributes like title and such... plus, if you put both dimensions in one string, you'll be needing to parse through that string to pull them out, and, and... well, it sounds like you're trying to cut bread with a chainsaw.

[Apothem]

Yes... but that still doesn't answer my question. Thanks for suggesting alternatives, but I don't want to create 2+ arrays just to store information about 20 or so elements.