[Js] Getting and verifying a class attribute setting

Dan Rathbun

Trying to get and verify a class attribute setting.

Cannot get it to work in Chrome.

So in HTML the list is defined:

<ul class="toppicker picklist">
  <li class="pickitem">
    <a class="picklink" href="/option?num=1">Option 1</a>
  </li>
  // ... etc. (more items)
</ul>

I have retrieved a list of <ul> elements in list

I am trying iterate the list and find the one that has class "toppicker":

 for (i=0;i<list.length;i++) {
   cn = ( list[i].getAttribute("className") || list[i].getAttribute("class") )
   if cn.substr(0,9) == "toppicker" {
     // manipulate the picklist object
   }
 }

But it does not work with either the DOMstring ("className") or content string ("class").

I need to stay with DOM Level 2.

If I comment out the class check, and just go with list[0] the code works.
But I cannot be sure the <ul> I want is always the first element in the collection.

thomthom

cn.substr(0,7) == "toppicker"

"toppicker" is 9 characters - you're checking for 7..?

thomthom

cn.indexOf("toppicker") != -1
?

Dan Rathbun

@thomthom said:

cn.substr(0,7) == "toppicker"

"toppicker" is 9 characters - you're checking for 7..?

Whoops .. the class names were changed to protect the guilty.

(The real classname is 7 chars.)

Dan Rathbun

@thomthom said:

cn.indexOf("toppicker") != -1
?

This is the first thing I tried.

Then also tried:
.indexOf("toppicker") >= 0

So I do not think it is the String functions that are the problem.

I think it is getting the value of the class attribute.

.class is DOM Level 3 (and IE9+)

The page at MSDN on .getAttribute mentions that in older IE versions, and certain compatibility modes, the DOMstring "className" must be used, but in Standards compliant modes, "class" can be used. (or visa versa.) .. so hence the || assignment.

Another weird thing is the Notepad++ lexer does not lex .getAttribute as a known function.

thomthom

A framework like jQuery or similar takes these pains away.

Dan Rathbun

@thomthom said:

A framework like jQuery or similar takes these pains away.

OK well it is already loaded, but I do not know the JQuery syntax.

And the tweaks are being done inside a function, is that OK ?

thomthom

$('ul.toppicker')

to get the DOM element:
$('ul.toppicker').get(0) - though I rarely find use for this as I let jQuery do everything.

Being inside a function should be of no difference.

Dan Rathbun

OK so what does it return if nothing found ?? null ?

Can I use a selector path like in CSS?
if $(div#upper-nav ul.top-picker) { // do stuff }
.. and then dispense with iterating the list of the div's <ul> elements.

.. also how about:

if $(body#someid) {

  if list = $(div#upper-nav ul.top-picker) {
    // manipulate list
  }

}

thomthom

@dan rathbun said:

Can I use a selector path like in CSS?

Exactly!

@dan rathbun said:

OK so what does it return if nothing found ?? null ?

http://api.jquery.com/jQuery/

@unknownuser said:

If no elements match the provided selector, the new jQuery object is "empty"; that is, it contains no elements and has .length property of 0.

<span class="syntaxdefault"><br />&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="syntaxkeyword">if&nbsp;(&nbsp;$(</span><span class="syntaxstring">'body#someid'</span><span class="syntaxkeyword">).</span><span class="syntaxdefault">length&nbsp;</span><span class="syntaxkeyword">>&nbsp;</span><span class="syntaxdefault">0&nbsp;</span><span class="syntaxkeyword">)&nbsp;{<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;}<br />&nbsp;</span><span class="syntaxdefault"></span>