Can't target ID of an element in a loop using jQuery

Question

I'm stumped and need some help. I am trying to implement some responsive code, upon implementation, I had to re-jigger some code to make it work. One being getting the ID from a table element. The HTML I have so far:

<div class="title">blah</div>
<table id="Sailing%20Monohull" class="responsive">
    <!-- contents -->
</table>

When you go responsive, the HTML changes, like so:

<div class="title">blah</div>
<div class="table-wrapper">
    <div class="scrollable">
        <table id="Sailing%20Monohull" class="responsive">
            <!-- contents -->
        </table>
    </div>
    <div class="pinned">
        <table id="Sailing%20Monohull" class="responsive">
            <!-- contents -->
        </table>
    </div>
</div>

This is repeated 3 times. When responsive, I want to get the table ID, example "Sailing%20Monohull" I have tried in Chrome's console:

$(".title").each(function(index, element) {
    console.log($(this).next().find('.scrollable').children().attr('id'));
});

and I got the desired results. but when I put it in my file, upload it and run it, I get undefined and I don't know why. I am open to any ideas. Thanks in advance

score 0 · Answer 1 · answered Dec 29 '14 at 05:17

0

Your table id is not a valid identifier. Do not use special characters, except for _. Use number or characters.

answered Dec 29 '14 at 05:17

Nikhil Pai

117
7

Can you elaborate? Only spcaeing characters are illegal characters in `id`s in HTML5. – Teemu Dec 29 '14 at 05:19
A valid identifier can only begin with a alphabet or underscore, nothing else. And other characters in the identifier can contain numbers, characters or _, no special characters alllowed. – Nikhil Pai Dec 29 '14 at 05:20
[Nope](http://www.w3.org/TR/html5/dom.html#the-id-attribute). – Teemu Dec 29 '14 at 05:22
Even with the invalid identifier, it still works. I can still get the ID. – Akira Dawson Dec 29 '14 at 05:25
@Teemu - Pls check http://jsfiddle.net/jdk8urdm/ and the console too. – Nikhil Pai Dec 29 '14 at 05:28
2

Please check the [jQuery documentation](http://api.jquery.com/category/selectors/) ; ). Also CSS might not accept such of `id`s though they are valid in HTML5. – Teemu Dec 29 '14 at 05:30
1

@NikhilPai, http://jsfiddle.net/jdk8urdm/1/ – th1rdey3 Dec 29 '14 at 05:33
@Teemu, however, it is better not to use special characters in tag id, because it reduces code readability. – th1rdey3 Dec 29 '14 at 05:37
@th1rdey3 Yes, but my point was just disagree with the incorrect answer. Also, what OP says in the comment to Sadikshasan's answer, the problem most likely lies in the timing, and has nothing to do with `id`s. – Teemu Dec 29 '14 at 05:43
@Teemu, I am just clearing it for other readers. They might get tempted to use special characters in tag IDs. Which is not a good practice. – th1rdey3 Dec 29 '14 at 05:46
Just a query - What is OP? – Nikhil Pai Dec 29 '14 at 05:54
@NikhilPai OP is either "Original Poster" or "Original Post". – Teemu Dec 29 '14 at 05:57
@NikhilPai overpowered! Ah, sorry, to much gaming. Teemu is right. – PolGraphic Dec 29 '14 at 06:02

score 0 · Answer 2 · answered Dec 29 '14 at 05:18

0

Try this

$(".title").each(function(index, element) {
    console.log($(this).next("div").find('.scrollable').find("table").attr("id"));
});

JS Fiddle

answered Dec 29 '14 at 05:18

Sadikhasan

17,212
19
72
111

While this works in your Fiddle and in my console, I plop it into my code and run it and I get "undefined". The responsive HTML comes into play at a certain width, would that be a reason as to why I can't target the ID? – Akira Dawson Dec 29 '14 at 05:29

Can't target ID of an element in a loop using jQuery

2 Answers2