Get id of div in nested HTML elements using jquery

Question

How can I get, using jquery, the id of the first div with class: post (367), in the following HTML code:

<div id="own-posts">
  <span class="title">Me</span>    
  <div class="posts_container">
    <div class="post"></div>  

    <div id="367" class="post"></div>
    <div id="365" class="post"></div>
    <div id="345" class="post"></div>
    <div id="343" class="post"></div>

  </div>

</div>

Among the solutions I tried:

$('#own-posts').children()[1].children()[1].attr('id');

It is not valid to have an ID starting with a number (except in HTML5), older browser may complain of problems. — Niet the Dark Absol, Sep 28 '13 at 11:15
@Kolink Thank you for your important remark, I will take it into consideration in future. What about having number in data-attribute, is it causing the same problem? — Adib Aroui, Sep 28 '13 at 11:17
@whitelettersandblankspaces No, it's not! Following Kolink's comment, even it's completly valid to start ID with a number in HTML5, CSS still doesn't like it. So you should follow Kolink's advice — A. Wolff, Sep 28 '13 at 11:22
@whitelettersandblankspaces I like to use `data-id` when I'm storing an ID number. In jQuery you can access it with `.data("id")` if you want (I don't use jQuery myself, so I just use `.getAttribute("data-id")`) — Niet the Dark Absol, Sep 28 '13 at 11:23
@A.Wolff: If I understand you well, it is better to use `data-id` as attribute and start it with a letter, then create further jquery code that will retrieve the id (the number)? — Adib Aroui, Sep 28 '13 at 11:29
@whitelettersandblankspaces you should prefix IDs if using ID attribute, you shouldn't have to prefix IDs if using data-id attribute — A. Wolff, Sep 28 '13 at 11:31

score 4 · Accepted Answer · answered Sep 28 '13 at 11:06

4

The first .post element doesn't have an ID, so I guess you mean the first .post element that actually has an ID attribute :

var id = $('#own-posts .post[id]:first').prop('id');

FIDDLE

answered Sep 28 '13 at 11:06

adeneo

312,895
29
395
388

+1, It is perfectly working in Fiddle, but I dont know why in my webpage it doesnt work, I should deeply understand your solution. – Adib Aroui Sep 28 '13 at 11:09
Do you have more than one element with the ID `#own-posts`, did you include jQuery and a document ready function etc ? – adeneo Sep 28 '13 at 11:12
I have one element with id #own-posts, jquery and document ready are here, the probmel was that the first child with class `post` didnt have the id, so I used Sergio remark and it works now.Thank you very much for your invaluable hel – Adib Aroui Sep 28 '13 at 11:15
1

Did you read my answer at all, this selects the first .post element that has an ID? – adeneo Sep 28 '13 at 11:16
I am very sorry I got too many ansewers and comments that I thought you didn't notice that remark. – Adib Aroui Sep 28 '13 at 11:20
@whitelettersandblankspaces this is exactly the purpose of this answer, get first element with class '.post' which has an attribute ID – A. Wolff Sep 28 '13 at 11:20
@A.Wolff, Totally agreeing with you – Adib Aroui Sep 28 '13 at 11:21

score 1 · Answer 2 · edited May 23 '17 at 11:59

1

$('#own-posts .post:first').prop('id'); works if all divs with that class have a id.

Otherwise if the pattern is the first div.post does not have id, but the second does you can use:

$('#own-posts .post').eq(1).prop('id');

I used .prop() because of this

edited May 23 '17 at 11:59

Community

1
1

answered Sep 28 '13 at 11:07

Sergio

28,539
11
85
132

The link is interesting, I will try to understand this and make it work, thank you for your time – Adib Aroui Sep 28 '13 at 11:11
1

Perfect, the second solution works, it was smart from you to observe that the first div doesnt contain id. Many thanks – Adib Aroui Sep 28 '13 at 11:12

Suresh Atta · Answer 3 · 2013-09-28T11:14:19.493

1

Try

$('#own-posts .post').eq(1).prop('id');

DEMO

edited Sep 28 '13 at 11:14

answered Sep 28 '13 at 11:08

Suresh Atta

120,458
37
198
307

Get id of div in nested HTML elements using jquery

3 Answers3