22

I have just started using jQuery and although following code gets the job done, I have a feeling that it can be shortened.

var accountAddress = $(document.createElement("input")).addClass("readOnly")
        .attr("contentEditable", "false").attr("id", "d_accountAddress");

$("#customerid_c").next().next().next().append(accountAddress);

If it is not clear - what I'm doing is creating new input tag, assigning class and making it read-only, then positioning new input two TD's to the right of some known text.

Update:

This is simplified HTML that I'm modifying. The place where I add content is marked with ##1## and ##2##.

<TD id=customerid_c>
    <LABEL for=customerid>Customer</LABEL>
</TD>
<TD id=customerid_d></TD>
<TD class=ms-crm-Field-Normal>
    <LABEL>##1##</LABEL>
</TD>
<TD>##2##</TD>
4
  • You don't need to add contentEditable=false.
    – SLaks
    Mar 22, 2010 at 12:53
  • Is the TD field the last one in the row? If so, you can write $('tr:has(#customerid_c) td:last-child')
    – SLaks
    Mar 22, 2010 at 14:01
  • Yes, it is the last in the row. But I'd rather not count on that. Mar 22, 2010 at 14:23
  • 1
    For tags, e.g. <td>, World Wide Web Consortium (W3C) recommends lowercase in HTML 4, and demands lowercase tags in XHTML. So generally it is good to get into the habit of using lowercase everywhere. Apr 28, 2011 at 12:35

1 Answer 1

55

Yes, it can.

$('#customerid_c').nextAll().eq(2)
    .append('<input class="readOnly" id="d_accountAddress" />');

In jQuery 1.4.2, you can write

$('#customerid_c~:eq(2)')
    .append('<input class="readOnly" id="d_accountAddress" />');

This selector, which does not work correctly in earlier versions of jQuery, uses the Next Siblings Selector (~) to select all sibling elements following #customerid_c, then uses the :eq selector to select the third (zero-based) element matched by the other selector.

jQuery has a large variety of selectors that can probably replace the indexed sibling. If you show us your HTML, we can find you one.

Other notes:

You can set multiple attributes in one call:

$(something).attr({ id: 'd_accountAddress', type: 'text' });
9
  • 1
    I've never seen that syntax before, what does #el~:eq(2) specifically do? Mar 22, 2010 at 12:54
  • I think that the ~ is used to navigate to the children of an element, in this case #customerid_c, and eq is the equality operator, in this case used to go to the 0 based index, so the third child.
    – Kieron
    Mar 22, 2010 at 12:57
  • 6
    A cleaner way to write it would be. $('#customerid_c').nextAll().eq(2).append('<input class="readOnly" id="d_accountAddress" />'); Mar 22, 2010 at 13:03
  • @Tatu, @used, @Kieron, @mmcgrail: That selector does work in 1.4.2. SO uses 1.3.2, which apparently has a bug.
    – SLaks
    Mar 22, 2010 at 13:25
  • 2
    @Shekhar: You can't. (Unless you hard-code the full ID, perhaps using server-side inline code)
    – SLaks
    Jan 18, 2011 at 4:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.