CODEWITHSUNDEEP
jqueryselector
illuminatus
illuminatus

Reputation: 2086

How to access element by passing selector in jquery?

I want to get content of #chocolate_type by passing lqjmje5plsqnl258canal0lmb0!323 as parameter to jQuery. I tried:

$('#'+id).find('td:first').html();

but it didn't work. Here's the markup:

<tr bgcolor="#CCCCCC" align="center" id="lqjmje5plsqnl258canal0lmb0!323">
    <td id="chocolate_type">Chocolate Hearts</td>
    <td>2.79</td>
</tr>

Thanks in advance for any help.

Upvotes: 2

Views: 403

Answers (7)

Christopher
Christopher

Reputation: 1743

I had the same issue building a search form, as I used the search context to build to rebuild the form after each submission. A search for "!#/ \", for example would generate some invalid IDs.

For many simple types of invalid characters (especially when you're auto-generating IDs and can't tightly control the input), fail over to JavaScript:

document.getElementById(yourElementId);

will work just fine.

Upvotes: 0

Pradeep
Pradeep

Reputation: 3276

Try something like this $('tr[id=' + id + ']').html(). This worked for me. This is just the sample. In your case it would become $('tr[id=' + id + ']').find('td:first').html().

Update: $('#' + id) is the right way to find the element when your id is in some other variable. However in your case ! is causing problem and preventing it to work.

Upvotes: 0

Spiny Norman
Spiny Norman

Reputation: 8327

Your code looks ok, but you can't use the ! character in an ID. I think that may be your problem.

You may use $('#' + id).find('td:first'), $('td:first', '#' + id), $('#' + id + ' td:first') or whatever you like. I believe there is a performance comparison for all this somewhere, I'll see if I can find it.

EDIT: here's a very interesting article about jQuery performance, which says find() is better than context: http://jonraasch.com/blog/10-advanced-jquery-performance-tuning-tips-from-paul-irish. So, you're doing it right. Just change the id :)

Upvotes: 1

Geoff Appleford
Geoff Appleford

Reputation: 18832

Your id contains invalid characters. From the w3c:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

More info here

Upvotes: 2

Tatu Ulmanen
Tatu Ulmanen

Reputation: 124768

The selector fails because of the exclamation mark. If you are using Firefox, check your console and you should see a error like this:

Error: uncaught exception: Syntax error, unrecognized expression: !323

Remove the exclamation mark from the ID if you can. The allowed characters for an ID can be found here:

http://www.electrictoolbox.com/valid-characters-html-id-attribute/

Using $('tr[id='+id+']') will work also but you really shouldn't depend on that as the functionality may change due to this being undefined behaviour.

Upvotes: 0

Zhasulan Berdibekov
Zhasulan Berdibekov

Reputation: 1087

It is better to write code in such a way

$('tr#'+id+' td:first').html();

Upvotes: 0

Sarfraz
Sarfraz

Reputation: 382696

I suspect lqjmje5plsqnl258canal0lmb0!323 doesn't seem to be a good value for the id. The id value should not start with a number and you should avoid using special characters as value for the id:

$('#lqjmje5plsqnl258canal0lmb0!323 #chocolate_type').html();

You can also directly get the contents by id:

$('#chocolate_type').html();

Upvotes: 1

Related Questions