SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard
    Join Date
    Jan 2005
    Location
    blahblahblah
    Posts
    1,447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    [jQuery] append id

    Hi,

    Still working on understanding the magic of jQuery

    I'm trying to click a <div>, get its id, and append it to a <p>.

    Code:
     $(".test").click(function() {
         var id = this.id; 
         id.appendTo("#ids");
       });
    HTML Code:
    <p id="ids">
    ids: 
    </p>
        
    <div class="test" id="1"></div>
    <div class="test" id="2"></div>

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You've almost got it...

    Try this:

    Code JavaScript:
     $(".test").click(function() {
         var id = this.id; 
         $('#ids').append(id);
    });
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Wizard
    Join Date
    Jan 2005
    Location
    blahblahblah
    Posts
    1,447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thansk a lot
    I searched the jaQuery manipulation part of the manual, but unfortunately I didn't find something like "toggleAppend", which would let me add an id when I click, and remove it if I click again that element.

    How would you go?

    Thanks again

    Regards,

    -jj.

  4. #4
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The easiest wat would be to have another element which just takes the id number - this way we could just replace it's entire content... So, if you were to use a span it would be like this:

    HTML:
    Code html4strict:
    <p id="ids">
    ids: <span id="idspan"></span>
    </p>
     
    <div class="test" id="1">THIS IS DIV 1</div>
    <div class="test" id="2">THIS IS DIV 2</div>

    JS:
    Code JavaScript:
    $(".test").click(function() {
         var id = this.id;
         $('#ids span#idspan').html(id);
    });
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  5. #5
    SitePoint Wizard
    Join Date
    Jan 2005
    Location
    blahblahblah
    Posts
    1,447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Thank you for your reply. It's a very interesting example Makes me learn

    But I wasn't very clear in my first post, sorry about that. When I click <div> number one, I'd like its id to be appended. When I click <div> number two, I'd like its id to be appended next to the first id already appended. And if I click again <div> number one, I'd like its id to be removed from the <p>#ids. Same goes for <div> number two.

    In other words: there can be more than one id appended, but if an id is already appended, we remove it.

    'Hope I'm clear

    Thanks again for your help.

    Regards.

    -jj.

  6. #6
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right ok... I understand..

    -->

    JS:
    Code JavaScript:
    $(".test").click(function(){
        var id = this.id;
        var spans = $("span[rel='id-" + id + "']");
        (spans.length !== 0) ? $("span[rel='id-" + id + "']").remove() : $('#ids').append('<span rel="id-' + id + '">' + id + '</span>');
    });

    I forgot to say that ID attribute values cannot start with numbers.. They'll work but if you want to comply to standards then don't do it...

    HTML:
    Code html4strict:
    <p id="ids">
    ids: 
    </p>
     
    <div class="test" id="div1">THIS IS DIV 1</div>
    <div class="test" id="div2">THIS IS DIV 2</div>
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  7. #7
    SitePoint Wizard
    Join Date
    Jan 2005
    Location
    blahblahblah
    Posts
    1,447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You rock Jimmy (as usual).

    Could you explain to me this part?

    Code:
    span[rel='id-" + id + "']

  8. #8
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have a look here for an explanation -> http://docs.jquery.com/Selectors/att...attributevalue

    Glad I could help...
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)


Bookmarks

Posting Permissions

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