SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Evangelist
    Join Date
    Jan 2005
    Posts
    425
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery looping thru hidden fields by ID

    Hi

    I want to loop thru all the hidden fields on the page, that have an ID which starts with "general_" and ends in "_10".
    Eg IDs:
    id = "general_name_10"
    id = "general_link_10"
    id = "general_price_10"

    How can I do such a loop in jQuery?

    Thanks

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    You could probably use something like the following example wrote just now.

    Code JavaScript:
    $(function() {
        $('[id^="general"]').each(function() {
            if (this.id.match(/general_(.*)_10/i)) {
                // Do something
            }
        });
    });

  3. #3
    SitePoint Evangelist
    Join Date
    Jan 2005
    Posts
    425
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, is there anyway of restricting the loop to only loop thru matching IDs (general_(.*)_10)?

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Do you mean as in using the names you listed?

    Code JavaScript:
    this.id.match(/general_(name|link|price)_10/i)

  5. #5
    SitePoint Evangelist
    Join Date
    Jan 2005
    Posts
    425
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahh nope

    I meant is something like this possible:
    Code JavaScript:
     $('[id^="/general_(.*)_10/i)"]').each(function() {        
                // Do something       
        });

    rather than
    Code JavaScript:
    $(function() {
        $('[id^="general"]').each(function() {
            if (this.id.match(/general_(.*)_10/i)) {
                // Do something
            }
        });
    });

  6. #6
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    No, jQuery expressions are limited to what they can handle which is the reason i used the loop and regular expression.

  7. #7
    SitePoint Evangelist
    Join Date
    Jan 2005
    Posts
    425
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, thanks. Then would somethign like this be possible?

    Code JavaScript:
    var product = 10;
    jQuery(function() {
    				jQuery('[id^="general"]').each(function() {
    					if (this.id.match('/general_(.*)_'+product +'/i')) {
    						alert(jQuery(this).val());
    					}
    				});
    			});

    because ultimately I want this to be within an outer loop (looping thu product ids)

    Thanks again
    Cheers

  8. #8
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    That should work fine

  9. #9
    SitePoint Evangelist
    Join Date
    Jan 2005
    Posts
    425
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, just put it to the test:
    Code JavaScript:
    var product = 10
    jQuery(function() {
                    jQuery('[id^="general"]').each(function() {
                        if (this.id.match('/general_(.*)_'+product+'/i')) {
                            alert(jQuery(this).val());
                        }
                    });
                });
    - didn't work. But if the 10 is hardcoded in the match it works:
    Code JavaScript:
    //var product = 10 This is hardcoded below.
    jQuery(function() {
                    jQuery('[id^="general"]').each(function() {
                        if (this.id.match(/general_(.*)_10/i)) {
                            alert(jQuery(this).val());
                        }
                    });
                });

    Hopefully can get it work without it being hardcoded.

  10. #10
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    I did a bit of light reading on dynamic regular expressions and hopefully this should work

    Code JavaScript:
    this.id.match(new RegExp('general_(.*)_' + product, 'i'))

  11. #11
    SitePoint Evangelist
    Join Date
    Jan 2005
    Posts
    425
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much, that worked a treat.

  12. #12
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    No problem

  13. #13
    SitePoint Evangelist
    Join Date
    Jan 2005
    Posts
    425
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wanting to expand on this a bit now, something like:

    Code JavaScript:
    jQuery(function() {
    				jQuery('[id^="(general|requirements)"]').each(function() {																
    					if (this.id.match(new RegExp('(general|requirements)_(.*)_' + product, 'i'))) {						
     
    						// Do something
    					}
    				});
    			});

    Note the (general|requirements) - so where it ID starts with either "general" or "requirements". Rather than just "general" as we had it before.
    However this doesn't work.

  14. #14
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Like i said before jQuery is very limited to what its expressions can handle, to loop for multiple id's simply change what you have to the following...

    Code JavaScript:
    jQuery('[id^="general"], [id^="requirements"]')

  15. #15
    SitePoint Evangelist
    Join Date
    Jan 2005
    Posts
    425
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much again. Works perfectly!!

  16. #16
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    No problem

  17. #17
    SitePoint Evangelist
    Join Date
    Jan 2005
    Posts
    425
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've come up with a problem with this rule:
    PHP Code:
    this.id.match(new RegExp('(general|requirements)_(.*)_4''i'
    It matches not only:
    general_price_4
    it also will find
    general_price_44
    general_price_45

    ..if they exist on the page.
    Anyway of stopping this?

    Thanks much.

  18. #18
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Give the following a try

    Code JavaScript:
    this.id.match(new RegExp('(general|requirements)_(.*)_4{1}', 'i')

  19. #19
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,710
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by LuckyB View Post
    I've come up with a problem with this rule:
    PHP Code:
    this.id.match(new RegExp('(general|requirements)_(.*)_4''i'
    It matches not only:
    general_price_4
    it also will find
    general_price_44
    general_price_45

    ..if they exist on the page.
    Anyway of stopping this?
    Is it possible to combine attribute_starts_with and attribute_ends_with selectors?

    For example:

    Code javascript:
    jQuery(function($) {
        $('[id^="(general|requirements)"]').each(function () {                                
            $('[id$="_4"]').each(function () {      
                // Do something
            });
        });
    });
    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
  •