SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    UK
    Posts
    539
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Loop through all spans

    I need to loop through each occurrence of (spans where id=getthis):

    <span id="getthis" name="info:to:send:to:script"></span>

    on my webpage and foreach of these occurrences, insert a response from an ajax call based on the content of the name tag.

    Any help appreciated :-)

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by skyline View Post
    I need to loop through each occurrence of (spans where id=getthis):
    You're going to have trouble from here on, due to id attributes needing to be unique identifiers. That means, no duplicates id's are allowed on the same page.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    UK
    Posts
    539
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Well ok we can go with class="getthis" instead :-)

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by skyline View Post
    Well ok we can go with class="getthis" instead :-)
    Depending on how the spans are organised on the page, you may not even need to use multiple classes. A single identifier or class on a common parent is the best way, so that from there you can get all the spans.

    Can you provide some info about how the spans are organised?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    UK
    Posts
    539
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The spans could be anywhere on the page, and so won't be simply within a certain div.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by skyline View Post
    The spans could be anywhere on the page, and so won't be simply within a certain div.
    That's good to know.

    Are you using a pre-existing code library on the page, such as jQuery, or will you want to use native-JavaScripting techniques.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    UK
    Posts
    539
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd rather use native js as the script if possible!

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by skyline View Post
    I'd rather use native js as the script if possible!
    Good stuff, in that case you can use the code and examples from bulletproof ajax as the basis for the ajax work.

    When it comes to searching for elements by their class name, there are fast web browser techniques where getElementsByClassName is supported, but where browser support is lacking (I'm mostly looking at you, Internet Explorer) you can fall back on custom versions of getElementsByClassName, and then knit them together so that native browser support takes precedence over the other one.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    UK
    Posts
    539
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. How can I loop through all of the spans and call my ajax function foreach with the span name info, and then update the contents of each span with the result? That's what i'm really looking for an example of! I should be ok with the ajax side etc...

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by skyline View Post
    Thanks. How can I loop through all of the spans and call my ajax function foreach with the span name info, and then update the contents of each span with the result? That's what i'm really looking for an example of! I should be ok with the ajax side etc...
    You would use getElementsByClassName to retrieve an array-like object that consists of the matching elements, and then a simple for loop to loop through each of them.

    You can give the ajax request a callback function that updates the content after it has been successfully received.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    UK
    Posts
    539
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So including that js script and then something like this should alert each span's name contents?

    function getspans(){

    var spans = getElementsByClassName("getthis");
    for(var i=0; i<spans.length; i++)
    {
    alert(spans[i].name);
    }

    }

    window.onload = getspans();

    Although this doesn't alert anything on a target page which contains a series of spans with class="getthis" and name="....."

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by skyline View Post
    Although this doesn't alert anything on a target page which contains a series of spans with class="getthis" and name="....."
    No, it won't, because currently your getElementsByTagName doesn't exist.
    Normally it's called from the document object, but if it doesn't exist you can provide an alternative function to get the job done, such as from one of the previous links.

    Code javascript:
    if (!document.getElementsByClassName) {
        document.getElementsByClassName = ... // function here
    }

    At which point, your code can then use document.getElementsByClassByName(...) regardless of whether the web browser supports it or not.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    UK
    Posts
    539
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I'm not following that! Can you put my example code into your explanation?

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by skyline View Post
    Sorry, I'm not following that! Can you put my example code into your explanation?
    My sample code goes before any of your code. The purpose of that sample code is to be compatability code, to check if the web browser has a built-in getElementsByClassName method, and if not to let the browser know how to do it.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  15. #15
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    UK
    Posts
    539
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks. I've just dug out some old jquery/json code so I'm experimenting with that right now (sorry if I've wasted your time!)

    Let's say I have this stucture:

    html page with a few <span id="getthis"></span>
    - includes script1.php as js file

    script1.php consists of echo'd document.write(...) js (php so i can do some db stuff too)
    - includes script2.js (jquery loop grabbing spans: $("#getthis", this).each(function () { )
    - includes jquery.js

    script2.js contains jquery calls to grab each of spans with id getthis (ids just for now!!)

    Why wouldn't script2.js be able to see the spans on the 1st html page?
    I had it working when the script2.js was included directly from the 1st html page, just not since i've added it within another js file.

    I also tried this but didnt work:

    window.parent.$("#getthis", this).each(function () {

  16. #16
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by skyline View Post
    Why wouldn't script2.js be able to see the spans on the 1st html page?
    That we can figure out by taking a look at the resulting HTML code that is served up to the web page.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  17. #17
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would actually stay away from a custom getElementsByClassName for something like this and rather go with getElementsByTagName. The custom getElementsByClassName that you would need to write for browsers that don't support it will have to loop through the entire DOM (unless you use one that specifies a tag name with it) when he already knows that we're looking for spans. Not a showstopper or anything, but why not save time when you can .

    I would do something like this:

    Code:
    var els = document.getElementsByClassName ? document.getElementsByClassName('getthis') : function() {
      var allSpans = document.getElementsByTagName('span'),
          myClass = new RegExp('\\bgetthis\\b'),
          retVal = [];
      for (var i = 0, len = allSpans.length; i < len; i++) {
        var classes = allSpans[i].className;
        if (myClass.test(classes)) retVal.push(allSpans[i]);
      }
      return retVal;
    }();
    Didn't test this btw...

  18. #18
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by overthemike View Post
    I would actually stay away from a custom getElementsByClassName for something like this and rather go with getElementsByTagName
    Since he seems to now be using jQuery, he doesn't even need to use any of those native techniques either now.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •