Jquery .('selector').next(); is not working on div

JavaScript
1

I am getting confused here, really do not understand why nextData does not show up in the console.

$('div#1').click(function(){
    var data = $(this).html();
    var nextData = $(this).next().html();
    console.log(data);
    console.log(nextData);
});
2

Could you share the HTML this is being applied to?

3

I’m thinking the problem might be due to having an id named “1”
Leading numbers do not valid id values make.

1 Like
4

The editor does not show the HTML source code but interprets it immediately

<div>
    <div id='1'>
        Question 1
            <div class='next'>Next</div>
    </div><br><hr><br>
    <div id='2'>
        Question 2 
            <div class='next'>Next</div>
    </div><br><hr><br>
    <div id='3'>
        Question 3
            <div class='next'>Next</div>
    </div><br><hr><br>
    <div id='4'>
        Question 4 
            <div class='next'>Next</div>
    </div><br><hr><br>
</div>
5

To get the code to show up in a post, you either need to use the </> icon in the post editor, or put 3 backticks (usually the key to the left of the 1 key on a standard keyboard) both before and after the code you wish to share.

As @Mittineague said, the ID attribute must start with a letter, following which a number may be used.

6

The ‘next’ (next()) element in your html construct is the** break** element which has no html inside.

If you are trying to read the html of the next div the you would need something like this.

var nextData = $(this).next().next().next().next().html();

However that is pretty fragile and relies on exact html being present so you would be better off finding the next item by its id instead.

As others have said ids should not begin with a number although the routine will stil work in your short example.

1 Like
7

Thanks!

8

that was up to HTML 4. HTML5 now allows everything except whitespace. (see http://www.w3.org/TR/html/dom.html#the-id-attribute)

1 Like
9

Interesting to know. I did try to get on the w3.org site, but they’re blocking our IP for some reason - not helpful at all for anyone with an interest in web stuff over here.

10

For you, @chrisofarabia:

1216×330 41 KB

(From the page linked above.)

1 Like
11

Note that although html allows single digits as ids you won’t be able to target them with css.
e.g.

#1{background:red}

That won’t work but this will.

#☺ { background: lime; }
<p id='☺'>This paragraph gets a lime background.</p>

Therefore care needs to be taken to avoid mishaps :smile:

12

That spec has gone full circle then. Every reference I found, bar one, said it must start with a letter. The one reference, was Jennifer Robbins’ (nee Niederst) ‘Web Design in a Nutshell’ (O’Reilly 1999, First Edition), which shows an example using only numbers for an ID.

13 
<p class="#">Foo.

That looks too confusing for words.

14

I see what Mr. Bynens is saying, but for now, I think I’ll keep to what I’d been doing to date (and it doesn’t look like that)

15

Yes, I don’t think I’ll be changing soon either.:slight_smile:

I can see the need for targeting divs by an id number when content is generated by js but it would have been sensible to update the css spec at the same time to match,

1 Like
16

Me too, but presumably you then need to update the CSS dynamically to target it too - seems inelegant somehow.

17

Neither CSS nor JavaScript allow them to start with a number though. So their use is then restricted to being the destination of a link.

18

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.