Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Regular Coder Apothem's Avatar
    Join Date
    Mar 2008
    Posts
    380
    Thanks
    36
    Thanked 25 Times in 25 Posts

    Adding text to a list AND removing them

    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>

  • #2
    Regular Coder Iszak's Avatar
    Join Date
    Jun 2007
    Location
    Perth, Western Australia
    Posts
    332
    Thanks
    2
    Thanked 58 Times in 57 Posts
    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
    Code:
    <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
    Code:
    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

  • #3
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    Quote Originally Posted by Iszak View Post
    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.
    The way to success is to assume that there are no impossible things. After all, if you think something is impossible, you will not even try to do it.

    How to ask smart questions?

  • #4
    Regular Coder Apothem's Avatar
    Join Date
    Mar 2008
    Posts
    380
    Thanks
    36
    Thanked 25 Times in 25 Posts
    Well, how do I add an attribute that is valid and can be used as a reference to sorting?

  • #5
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    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

  • #6
    Regular Coder Apothem's Avatar
    Join Date
    Mar 2008
    Posts
    380
    Thanks
    36
    Thanked 25 Times in 25 Posts
    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?

  • #7
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    Quote Originally Posted by Pykex View Post
    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.
    The way to success is to assume that there are no impossible things. After all, if you think something is impossible, you will not even try to do it.

    How to ask smart questions?

  • #8
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    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.

  • #9
    Regular Coder Apothem's Avatar
    Join Date
    Mar 2008
    Posts
    380
    Thanks
    36
    Thanked 25 Times in 25 Posts
    One thing it can be used for is for resizing a bunch of images, as such:
    Code:
    <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()).

  • #10
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    I feel like we're going in circles because you can simply use Javascript variables and arrays to store stuff.

  • #11
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    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.
    The way to success is to assume that there are no impossible things. After all, if you think something is impossible, you will not even try to do it.

    How to ask smart questions?

  • #12
    Regular Coder Apothem's Avatar
    Join Date
    Mar 2008
    Posts
    380
    Thanks
    36
    Thanked 25 Times in 25 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •