Dealing with a complex HTML structure in jQuery

Question

I'm writing a jQuery plugin that will draw (with Canvas) and compare a forward and reverse traceroutes. The markup (which I full control over) currently looks something like this:

<div class="traceroute-wrapper">
  <div class="forward-traceroute">
    <div class="hop">...</div>
    ...
  </div>
  <div class="reverse-traceroute">
    <div class="hop">...</div>
    ...
  </div>
</div>

My current strategy is invoke the plugin on the wrapper element ($('.traceroute-wrapper').traceroute() and simply to provide forwardTracerouteClass and reverseTracerouteClass plugin options, which the plugin uses to pick the forward and reverse traceroutes.

I've always struggled, and never seen too many examples (certainly none spring to mind) of the best way to handle complex, nested data structures where not only should jQuery act on an element, but needs to know about nested elements.

Does anyone have any advice or examples of plugins which handle this elegantly?

Answer 1

I'm not 100% on what you're getting at but with JQuery I often take the top level element in question and store it as an JQuery object. I then feed this into any further statements.

So:

var wrapper = $('.traceroute-wrapper');

$(wrapper).each() { 
   alert ($('.reverse-traceroute", wrapper).length); // will only search what was taken in that wrapper.
}

poor example, but I hope it helps.