SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    Aug 2007
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery Selectors and chaining

    Hi Guys,
    pretty easy question.
    I haven't used jquery for quite a while and I'm trying to simply alter out the text in a div with an ID of "test" but I'm running into trouble.

    Code:
            var mytest = $("#test");
            alert(mytest);
    I'm sure it's because I've selected the div as a whole, but I've tried selecting the first child with no success.

    I suppose I should first chain in a "p" selector, then select the first item, but I'm not quite sure how to do it.

    What I think is my closest attempt is as follows:


    Code:
            var mytest = $("#test").("p")[0];
            alert(mytest);
    If anyone has any tips it would be appreciated.

    thanks

  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)
    $("#test p") will select all paragraphs in the test div, but if you're just wanting to change the contents of the test div, you can use jQuery's html method:

    Code JavaScript:
    $("#test").html('<p>Some new content</p>');
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict
    Join Date
    Aug 2007
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I want to get the contents of the p tag in the test div.
    If we assume it's the first p tag in test how would I go about it.

    **Edit**
    After a quick look at the jquery docs, I can see that I just need to use:
    $("#test p").html()
    to get the first item, but what if I want the 3rd (just to help me understand it better)

  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 stevex33 View Post
    After a quick look at the jquery docs, I can see that I just need to use:
    $("#test p").html()
    to get the first item, but what if I want the 3rd (just to help me understand it better)
    The third one when counting from 0 would be number 2.

    There are a couple of different ways.

    You could use an eq selector:

    Code javascript:
    $("#test p:eq(2)").html();

    Or you could use the eq method:

    Code javascript:
    $("#test p").eq(2).html();

    One of the benefits of doing it the second way is that you can save $("#test p") to a variable, to retrieve different parts of it later. If it's just a once-only things though then the first way can be more effective.
    Last edited by paul_wilkins; Aug 30, 2010 at 03:35.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Addict
    Join Date
    Aug 2007
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that's perfect, thank you very much for your assistance.

  6. #6
    SitePoint Addict
    Join Date
    Aug 2007
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry to re-post in a topic I just considered closed, but I've just come across a similar issue that I'd like some help with.

    I'm playing with $getJSON and can select items where there's 1 matching item, but am having trouble selecting a specific 1 when there are multiple matching items.

    Below is my $getJSON jquery code:
    Code:
    $.getJSON("myExampleScripts/JSONExample1.js", function (json) {
                alert("JSON Data: " + json.menu.popup.menuitem.value);
            })
    Below is the sample json that I'm working with:
    Code:
    {"menu": {
            "id": "file",
            "value": "File",
            "popup": {
                "menuitem": [
                    {"value": "New", "onclick": "CreateNewDoc()"},
                    {"value": "Open", "onclick": "OpenDoc()"},
                    {"value": "Close", "onclick": "CloseDoc()"}
                ]
            }
        }}
    If I want to alert out the menu's id or value, I have no problems, but if I want to alert out the value item of the 3rd menu item within "popup", then I run into trouble.

    I'm not sure how to select specific ones, forgive me, JSON is quite new to me.

    If it fails, is there no way to specify a function to handle it? (Should I use $.ajax instead if I want to specify error functions?)

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Ok, I dunno jQuery and my Javascript's not all that great either, but
    "menuitem": [ <--

    looks like we're making an array (filled with key-value pairs where you have a lot of similar keys... is that allowed?).

    So if it's an array, you should be able to use array notation like
    (otherstuff).menuitem[0] or .menutitem[1] or .menuitem[2]

    I think. Anyway, you can try it if Paul doesn't get back to this quickly.

  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)
    Quote Originally Posted by stevex33 View Post
    If I want to alert out the menu's id or value, I have no problems, but if I want to alert out the value item of the 3rd menu item within "popup", then I run into trouble.

    When you use json.menu.popup.menuitem to access the array, the first item is at index 0, and the 3rd item is at index 2. So to get the value of the third item, resulting in "close", you would use json.menu.popup.menuitem[2].value

    Quote Originally Posted by stevex33 View Post
    If it fails, is there no way to specify a function to handle it?
    Not with getJSON. A post at http://stackoverflow.com/questions/1...he-error-event has a good solution for you there.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Addict
    Join Date
    Aug 2007
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    perfect, thanks a lot works, beautifully.


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
  •