SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2008
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to find a onkeyup embedded deep inside a DOM tree using jquery?

    Hi!

    I want to change the onkeyup attribute of a id="duration" textbox which is buried deep inside the DOM tree. I have a list which is inside a for loop:

    Code:
    var text = '<li><div class="MediaBlock">';
    text += '<div><input name="checkboxSelected" type="checkbox"  />' +  selectedListDesc[i];
    text += '<span class="MediaItemDescription"><i>' + selectedList[i];
    text += ' <div>Duration: <input type="text" id="duration"  name="duration"  onkeyup="saveDur(this, ' + i + ')" value="' + selectedListDur[i] + '" /></div>';
    text += '</i></span></div><div style="clear: both"></div></li>';
    $("#selectedMedia").append(text);
    The reason that I have so many div and span is for formatting, which I have cut short here.

    and I want to change the onkeyup it here:

    Code:
    $('#selectedMedia').eq(newPosition).find('#dur').attr("onkeyup", "saveDur(this, " + newPosition + ")");
    where newPosition is say the 3rd LI of the selecteMedia UL list. But I think the attr onkey up is not changed. Please help. Thanks.

  2. #2
    SitePoint Zealot
    Join Date
    Jul 2008
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anybody, please?

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    After the first block of code, you end up with:

    Code html4strict:
    <ul id="selectedMedia">
        <li>
            <div class="MediaBlock">
                <div>
                    <input name="checkboxSelected" type="checkbox"  />
                    Description 1
                   <span class="MediaItemDescription"><i>List Item 1
                       <div>Duration:
                           <input type="text" id="duration"  name="duration"  onkeyup="saveDur(this, 1)" value="Duration 1" />
                       </div>
                    </i></span>
                </div>
                <div style="clear: both"></div>
        </li>
    </ul>

    One of the divs isn't closed off, so you'll want to tidy that up.

    Would you find the onkeyup if you used #duration instead of #dur

    Also, if it's a loop where multiple list items will be created, you should know that id attributes must be unique. If they're used for styling, then class names can be more appropriate. If they're there to help you find things, there are other solutions that you should use instead.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Zealot
    Join Date
    Jul 2008
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your advice.


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
  •