From 4b6b66a8ab9ebe93bb791723416949f96e038f06 Mon Sep 17 00:00:00 2001
From: Neil Bowers <neil@bowers.com>
Date: Fri, 20 Jan 2012 13:37:41 +0000
Subject: [PATCH] Any classes you add to the <li> elements now get propagated
 to the node <div> elements

---
 jquery.jOrgChart.js | 14 ++++++++++++--
 readme.markdown     |  2 +-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/jquery.jOrgChart.js b/jquery.jOrgChart.js
index f1df0cb..daec657 100644
--- a/jquery.jOrgChart.js
+++ b/jquery.jOrgChart.js
@@ -133,6 +133,7 @@
     var $nodeRow = $("<tr/>").addClass("node-cells");
     var $nodeCell = $("<td/>").addClass("node-cell").attr("colspan", 2);
     var $childNodes = $node.children("ul:first").children("li");
+    var $nodeDiv;
 	
     if($childNodes.length > 1) {
       $nodeCell.attr("colspan", $childNodes.length * 2);
@@ -210,8 +211,17 @@
       $tbody.append($childNodesRow);
     }
 
-    if ($node.hasClass('collapsed')) {
-        $nodeRow.nextAll('tr').css('display', 'none');
+    // any classes on the LI element get copied to the relevant node in the tree
+    // apart from the special 'collapsed' class, which collapses the sub-tree at this point
+    if ($node.attr('class') != undefined) {
+        var classList = $node.attr('class').split(/\s+/);
+        $.each(classList, function(index,item) {
+            if (item == 'collapsed') {
+                $nodeRow.nextAll('tr').css('display', 'none');
+            } else {
+                $nodeDiv.addClass(item);
+            }
+        });
     }
 
     $table.append($tbody);
diff --git a/readme.markdown b/readme.markdown
index aed380d..01f8fc7 100644
--- a/readme.markdown
+++ b/readme.markdown
@@ -86,7 +86,7 @@ If you want a sub-tree to start off hidden, just add `class="collapsed"` to a li
       </li>
     </ul>
 
-*Note that you can include any amount of HTML markup in your `<li>` **except** for other `<ul>` or `<li>` elements.*
+This plugin works by generating the tree as a series of nested tables. Each node in the tree is represented with `<div class="node">`. You can include any amount of HTML markup in your `<li>` **except** for other `<ul>` or `<li>` elements. Your markup will be used within the node's `<div>` element. Any classes you attach to the `<li>` elements will be copied to the associated node, allowing you to highlight particular parts of the tree. The special `collapsed` class described above doesn't get copied to the node.
 
 
 -----