Question

Using Jquery 1.6.4.

I’m attempting to use css to give my app a clue as to the context of a user action by applying classes prefixed with context- at each layer of my UI.

So for a user clicking on something in the ‘search’ div I could assign the class ‘context-userContext-search’ and then everthing within that div would return that context when I call $(this).attr(‘class’) and so on and so forth down to the most descriptive context flags being applied to the element itself.

I’m doing this specifically to avoid having the define the entire heirarchy for each target element that needs it. But.. it doesn’t work.

My html:

<div class="context-userContext-search">
    <table>
        <thead class="context-layoutContext-tableHeader">
            <tr class="context-userContext-search">
                <th id="search_A2655_header" class="clickable sortable ui-state-highlight dialog_right_menu context-objectAttribute-A2655 context-objectClassName-host" value="A2655">
                    Hostname
                </th>
            </tr>
        </thead>
    </table>
</div>

When I call $('#search_A2655_header').attr('class') it returns this:

clickable sortable ui-state-highlight dialog_right_menu context-objectAttribute-A2655 context-objectClassName-host

When I expected it to return this:

context-userContext-search context-layoutContext-tableHeader clickable sortable ui-state-highlight dialog_right_menu context-objectAttribute-A2655 context-objectClassName-host

These classes of course do not exist within any stylesheets but I do not recall them having to for inheritance to work.

I could walk up the tree with .parents('[class^="context-"]'), but that is not nearly as cool and probably expensive.

Alternate methodologies to accomplish my goal are welcome.

Answer 1

What about this?

var classes = 
  $('#search_A2655_header')
    .parentsUntil('.context-userContext-search')
    .andSelf()
    .attr('class')

EDIT:

I’ve been trying this on my own and doesn’t seem to work. Try with this instead:

var getAllClasses = function (from, until) {
  var cs = []
  $(from)
    .parentsUntil(until)
    .andSelf()
    .each(function(){
      if (this.className)
        cs.push(this.className)
    })
  return cs
}

Demo: http://jsfiddle.net/elclanrs/3tR93/