0

Can anyone please help to explain what does this code do? Specifically what does "id*=section." mean?

Prototype script $$('span[tab_caption="abcd"]')[0].select('span[id*=section.]')[0]
diabloooo1
  • 1
  • 1

2 Answers2

1

I suspect the '.' might be a typo but i'm not sure. What this appears to be doing is find the first span with attribute tab_caption=abcd then within that element, find the first span with id of *section*.

When I try this with the trailing '.', I get an error from prototype saying Syntax error, unrecognized expression: [id*=section.]". But without the '.' things work out.

Looking at a sample piece of DOM like this

 <span tab_caption="ac">
   span ac
   <span id="section1">section1</span>
 </span>
 <span tab_caption="ad">
   span ad
   <span id="section2">section2</span>
 </span>
 <span tab_caption="ac">
   span ac
   <span id="section3">section3</span>
 </span>
 <span tab_caption="ad">
   span ad
   <span id="section4">section4</span>
 </span>

Then running those selectors in the console I get:

 > $$('span[tab_caption="ac"]')[0].select('span[id*=section]')[0]
 <span id=​"section1">​section1​</span>​
 > $$('span[tab_caption="ad"]')[0].select('span[id*=section]')[0]
 <span id=​"section2">​section2​</span>​

As you can see, the first query picked the first span with tab_caption=ac and gave me section1. The second picked the first from tab_caption=ad and gave me the first section* match which was section2.

Are you sure the '.' is supposed to be in the select argument?

mr rogers
  • 3,200
  • 1
  • 19
  • 31
  • Based on the answer above from @knittl, it's possible that though the selector would be valid with CSS3, Prototype doesn't know how to handle it. – mr rogers Jan 27 '14 at 19:49
  • Thanks. Is there any to output the selected HTMLs somewhere? for e.g. can I output $$('span[tab_caption="ac"]')[0] somewhere using any tool? potentially firebug? – diabloooo1 Jan 27 '14 at 21:10
  • Sure. You don't need Firebug. Just open your javascript console in whatever browser (Chrome -> View -> Developer -> Javascript Console, or Firefox -> Web Console (i think)), load the page, and paste that piece of code in the console. That's how I was able to see that Prototype didn't like the trailing . and that the selector worked. – mr rogers Jan 28 '14 at 00:32
0

This attribute selector was added with CSS3 and matches any attribute which contains the specified substring. In your case, any span element which has an id attribute with the string section. somewhere in it.

knittl
  • 246,190
  • 53
  • 318
  • 364
  • A [period is allowed as an id value](http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html). – knittl Jan 27 '14 at 19:56