Access the only span inside an element using JQuery

Question

This might sound like a question already asked before but actually isn't. I know how to access elements using JQuery but in this situation, the parent element has a colon in its name which is making it difficult. The structure is as follows:

<fb:comments class='fb_iframe_widget'>
   <span>something</span>
</fb:comments>

Note that the span I need to access doesn't have an ID or class and when I use the regular JQuery construct it throws an error due to the colon:

var fbspan = $('fb:comments span');

If colons are not allowed in tag names, how does Facebook do it in the first place? But more importantly, how do I access that span inside <fb:comments>?

Are you sure that element still exists in the DOM? I believe the FB SDK will change the source you have there in to valid HTML elements. Check the DOM inspector to see what the actual output is. — Rory McCrossan
– Rory McCrossan, Commented Feb 5, 2016 at 13:48
If colons are not allowed in tag names, how does Facebook do it in the first place?.....that can be achieved with xmlnamespacing. — Jai
– Jai, Commented Feb 5, 2016 at 13:49

Drudge Rajen · Accepted Answer · 2016-02-05 13:49:04Z

2

you can do it by using class if that solves your problem, like

$(".fb_iframe_widget").find("span");

or

$(".fb_iframe_widget span");

answered Feb 5, 2016 at 13:49

Drudge Rajen

8,0414 gold badges25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brian Ray · Accepted Answer · 2016-02-05 13:47:19Z

1

You need to escape the colon. Currently, jQuery is trying to read "comments" as a pseudo element.

var fbspan = $('fb\\:comments span');

Here's a fiddle.

answered Feb 5, 2016 at 13:47

Brian Ray

1,4913 gold badges20 silver badges20 bronze badges

Comments

Shailesh Singh · Accepted Answer · 2016-02-05 13:50:57Z

1

use the children()' to find span

$("fb\\:comments").children("span")

answered Feb 5, 2016 at 13:50

Shailesh Singh

3151 silver badge11 bronze badges

Comments

quirky purple · Accepted Answer · 2016-02-05 13:52:12Z

1

If you know the index of the occurrence of the span you wish to select will not change, you could use .eq() to select it.

Ex.

$('.fb_iframe_widget').eq(1).css({'color' : 'blue'})

https://jsfiddle.net/w37t1wzg/

answered Feb 5, 2016 at 13:52

quirky purple

2,2194 gold badges35 silver badges57 bronze badges

Collectives™ on Stack Overflow

Access the only span inside an element using JQuery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related