SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Manchester
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Locating an array in the DOM with JQuery

    Hey guys,

    In my HTML, I have an input text form array 'name[]'.

    I was just wondering if there's an easy way to identify all name elements in the DOM using a JQuery selector? (i.e. one that knows I've given it an array)

    Much thanks,

    Bardi

  2. #2
    SitePoint Member
    Join Date
    May 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didn't quite understand your question, but selecting all elements with a name should look like
    var res = $("[name=thename");

    where thename is the name of the input...

  3. #3
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Manchester
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What if there's a group of elements such as name[0], name[1], name[2] etc. and I would like to select them all so that I could go through them one by one using the each loop? I know how I'd be able to achieve that by using $([id^=name]) to select them but I want to avoid using this method as I'm assuming there's a better way to achieve this.

  4. #4
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,031
    Mentioned
    152 Post(s)
    Tagged
    2 Thread(s)
    $(":text[name=name\\[\\]]")
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  5. #5
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Manchester
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ScallioXTX View Post
    $(":text[name=name\\[\\]]")
    Okay, haven't had much luck with this. These are my html array form elements:

    Code HTML4Strict:
     
    <input type="text" value="200" class="input-width_small valid" name="child_width[0]" id="child_width[0]">
     
    <input type="text" value="200" class="input-width_small valid"  name="child_width[1]" id="child_width[1]">

    And I tried using your suggestion in my JS:

    Code JavaScript:
     
    $(':text[name=child_width\\[\\]]').each( function( index ) {
       alert('hi');
    });

    No alert prompts were displayed. I also tried removing the ':text' bit but that didn't seem to make any difference either.

    Any idea what I'm doing wrong here? Is the selector looking for matches of 'child_width[]' in the DOM and thus failing to stop any because they already have indexes?

    Many thanks.

  6. #6
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,031
    Mentioned
    152 Post(s)
    Tagged
    2 Thread(s)
    You were asking for name[] and now you're using name[0], name[1], so of course my code doesn't work.

    You should use $(':text[name=child_width\\[0\\]]'), $(':text[name=child_width\\[1\\]]'), etc

    Or $(":text[name^=child_width]")
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  7. #7
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Manchester
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry for the misunderstanding.

    Is there a way I can ask for it to locate all child_width array form elements?

    For example, $(':text[name=child_width\\[0\\]]') will only return the child_width[0] element.

    Whereas, $(":text[name^=child_width]") finds all form elements that begin with 'child_width', possibly resulting in the identification of unnecessary elements.

    And, if I was to name all elements of the array without defining their index in the HTML (i.e. child_width[]), I lose the ability to identify a specific array element and pair it with another linked array element of the same index. For example, when I loop through all child_width elements, I want to also access a child_width_min element of the currently iterated index.

    In other words, what I'm asking is if there is a way to ask for all elements of an array of a certain name. For example, $( ':text[name^=child_width\\[]' ) i.e. all elements that begin with 'child_width[' which would in theory return all of the array's elements ONLY. This didn't work, so I'm hoping there's a correct way to ask for this..?

    Much thanks for your help and patience so far.

  8. #8
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,031
    Mentioned
    152 Post(s)
    Tagged
    2 Thread(s)
    $( 'input[name^=child_width\\[]' )

    does work

    No idea why $( ':text[name^=child_width\\[]' ) doesn't work
    The manual says

    "$(':text') is equivalent to $('[type=text]')"

    So, $( ':text[name^=child_width\\[]' ) should be equivalent to $( '[type=text][name^=child_width\\[]' ), and as it turns out that does work
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  9. #9
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Manchester
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much ScallioXTX - that did work


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
  •