How do I use jQuery to select this div and change the html?

Question

I have the following html:

<div class="scroller-pane">
    <div class="scroller-header"></div>
    <div class="scroller-division" id="0">
        <div style="height:20px;"></div>
        <div class="title">A day with bears</div>
        <div class="date">30/06/2011</div>
        <div class="clear"></div>
        <div class="text">Lorem Ipsum is simply dummy text of the printing...</div>
        <div style="float:right;"><a href="htp://www.google.com">more>></a></div>
    </div>
<div>

And I have called:

console.log($('.scroller-pane .scroller-division #0 .title').html());

and

console.log($('.scroller-pane > .scroller-division > #0 > .title').html());

But all I get is 'undefined', why have neither of these select statement not worked? How do I write a jQuery select statement to get to the 'title' div..?

read the section here: http://www.w3schools.com/tags/att_standard_id.asp — Daniel A. White, Jul 06 '11 at 16:15
For more info on this: http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html — Björn, Jul 06 '11 at 16:16
@Daniel: w3schools is out of date. "0" is a valid `id` in HTML5. It's invalid in HTML4.01 and earlier, and invalid in CSS, and I would never use it, but it's valid in HTML5 (see my answer for links to references). — T.J. Crowder, Jul 06 '11 at 16:27

score 0 · Answer 1 · answered Jul 06 '11 at 16:15

0

If you have the ID of the element, just target it by that:

console.log($('#0').children('div.title').html());

answered Jul 06 '11 at 16:15

Christopher Armstrong

7,907
2
26
28

`id` in `javascript` can not start with numbers – Amir Ismail Jul 06 '11 at 16:17

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

And I have called:

console.log($('.scroller-pane .scroller-division #0 .title').html());

That says "Find all elements with class "title" that are descendants of an element with the id "0" that's a descendant of an element with the class "scroller-division" which is a descendant of an element with class "scroller-pane". But your element with id "0" is the "scroller-division", it's not a descendant of it.

If you really want to target this only if the element with id "0" is nested in that way, and to do nothing otherwise, you'd do this:

console.log($('.scroller-pane .scroller-division .title').html());

or

console.log($('.scroller-pane #0 .title').html());

or

console.log($('.scroller-pane .scroller-division[id=0] .title').html());

(That last will ignore elements with id "0" if they don't have the class "scroller-division".)

But if you want to target the "title" descendants of id "0" regardless of where it is, it gets a lot shorter:

console.log($('#0 .title').html());

Off-topic: Strongly recommend you don't use "0" as an id value. It's valid in HTML5, but it's invalid in HTML4.01 and earlier (ids can't start with a digit), and it's invalid in CSS (same).

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 06 '11 at 16:15

T.J. Crowder

1,031,962
187
1,923
1,875

`id` in `javascript` can not start with numbers – Amir Ismail Jul 06 '11 at 16:17
@Miroprocessor: JavaScript has nothing to say about `id` values one way or the other. HTML and CSS do. Curiously, I was just adding a recommendation to the author not to use "0" as an ID, but it ***is*** valid as of HTML5 (it's not valid in HTML4.01 or CSS). – T.J. Crowder Jul 06 '11 at 16:19
I think given the general tone of me using numbers for ID's its not a good ides... – Exitos Jul 06 '11 at 16:27
@T.J. Crowder I don't know it is valid in Html5, but I the author didn't mention if he uses Html5 or not any way, thanks for that new info – Amir Ismail Jul 06 '11 at 16:27
@Pete2k: Yeah, as I said above, I ***strongly*** recommended not using it. Just put an "x" in front of it or something (e.g., `x0`), then it's valid in all three standards. :-) – T.J. Crowder Jul 06 '11 at 16:29

score 0 · Answer 3 · answered Jul 06 '11 at 16:15

0

you can just access it via the id, using $('#id') however I think that it's not allowed to have a number as the first character of an id

answered Jul 06 '11 at 16:15

ianbarker

1,255
11
22

jchavannes · Answer 4 · 2011-07-06T16:24:28.530

0

I'm not sure if you want to change the html or retrieve it, but here's examples of both:

http://jsfiddle.net/wUV5r/

$(document).ready(function() {
    alert($('.scroller-pane .scroller-division[id=0] .title').html());
    $('.scroller-pane .scroller-division[id=0] .title').html('test');
});

edited Jul 06 '11 at 16:24

answered Jul 06 '11 at 16:16

jchavannes

2,440
1
26
15

score 0 · Answer 5 · answered Jul 06 '11 at 16:17

0

console.log($('.scroller-pane .scroller-division#0 .title').html());

answered Jul 06 '11 at 16:17

Shaz

15,637
3
41
59

How do I use jQuery to select this div and change the html?

5 Answers5