Web Analytics Made Easy -
StatCounter Adding text to a list AND removing them - CodingForum

Announcement

Collapse
No announcement yet.

Adding text to a list AND removing them

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

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

    Comment


    • #3
      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?

      Comment


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

        Comment


        • #5
          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

          Comment


          • #6
            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?

            Comment


            • #7
              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?

              Comment


              • #8
                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.

                Comment


                • #9
                  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()).

                  Comment


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

                    Comment


                    • #11
                      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?

                      Comment


                      • #12
                        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.

                        Comment

                        Working...
                        X