SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast Cory R's Avatar
    Join Date
    Mar 2009
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery Split Help

    I have a DIV that has a hyperlink with text after it, the text has no element wrapped around it except the outer DIV. I used .html(), but this grabbed the hyperlink as well. .text() grabs the text that I need to grab, however upon using it parseInt doesn't work, so that means I have to use .html() to grab the text I need to grab in order for parseInt to work. My question is, how do I use .html() and split out the hyperlink so only the text I need is what is grabbed?

    Here's the element:

    Code:
    <div><a href="URL" rel="nofollow">1</a> 27</div>
    I need to grab the 27 only so I can use parseInt on it.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Cory R View Post
    My question is, how do I use .html() and split out the hyperlink so only the text I need is what is grabbed?
    It seems that jQuery doesn't have a library method to do this, so you'll want to use standard JavaScript techniques instead.
    In this case, that would involve:

    1. turning the jQuery object in to a reference to an element (using [0])
    2. getting the last child (that being a #text element containing " 27")
    3. then taking the node value (that being the string " 27")


    parseInt($('div')[0].lastChild.nodeValue);​
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast Cory R's Avatar
    Join Date
    Mar 2009
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    var day = $(this).parents('td').find('div')[0].lastChild.nodeValue.html();
    var current = $(this).parents('table.calendar').find('#cal_current div')[0].lastChild.nodeValue.html();
    That doesn't work, how would I accomplish that?

    Thanks for the explanation, by the way.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Cory R View Post
    That doesn't work, how would I accomplish that?.
    More information is required in terms of what the code will be interfacing with, before theory can be put in to practice.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast Cory R's Avatar
    Join Date
    Mar 2009
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Basically the DIV I posted in my original post, I'm trying to use those two snippets to grab the number only. With each(), the number is grabbed from every table cell DIV and is given as title text to HTML hyperlinks on a different page with AJAX. The current date cell (the second strip) is so I can grab the current date and use parseInt to show links only from the that date hence forth.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Cory R View Post
    Basically the DIV I posted in my original post, I'm trying to use those two snippets to grab the number only. With each(), the number is grabbed from every table cell DIV and is given as title text to HTML hyperlinks on a different page with AJAX. The current date cell (the second strip) is so I can grab the current date and use parseInt to show links only from the that date hence forth.
    The ability to test some scripting code against a test example of the page hat it's going to be used on, is the sort of thing that is being meant here.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Enthusiast Cory R's Avatar
    Join Date
    Mar 2009
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's where I'm using it: http://s1.zetaboards.com/Cory/site/

    The Current Events block. See how not splitting the hyperlink causes the links to mess up? You can view the JavaScript in the page source. Ctrl F: $.get(main_url

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Well this here seems to be a problem.

    Code:
    $('#current_events').append('<a href="' + url + '" title="' + month + ' ' + day + '" class="' + css_class + '">' + text + '</a>');
    
    $('#current_events a').each(function () {
        if (parseInt(day) < parseInt(current)) {
            $(this).remove();
        }
    });
    Instead of adding a link then looping through all of the links, you should instead just place a condition around the append link itself.

    Code javascript:
    if (parseInt(day) >= parseInt(current)) {
        $('#current_events').append('<a href="' + url + '" title="' + month + ' ' + day + '" class="' + css_class + '">' + text + '</a>');
    }

    That seems to cleanly resolve the issue.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Enthusiast Cory R's Avatar
    Join Date
    Mar 2009
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, it works like a charm now, thank you so much!


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
  •