Skip to content
Browse files

fixed nested list problem; fixed manual values not being recognized

  • Loading branch information...
1 parent e24c10e commit 93a7b9dd7ac9872367cc04bd1ab2c14843c81cbc @impressivewebs committed Feb 22, 2012
Showing with 85 additions and 44 deletions.
  1. +5 −1 README.md
  2. +11 −0 index.html
  3. +69 −43 js/script.js
View
6 README.md
@@ -12,4 +12,8 @@ It also takes into consideration the optional 'start' attribute. Fortunately, 's
The script basically uses the cross-browser 'value' attribute on list items that was deprecated in HTML4 but now valid in HTML5.
-Special thanks to Remy Sharp for removing the polyfill's dependency on jQuery. If you want an earlier version that uses jQuery, you can grab the code from <a href="http://jsfiddle.net/ImpressiveWebs/h4JcL/">this jsfiddle</a>.
+Special thanks to <a href="http://remysharp.com/">Remy Sharp</a> for removing the polyfill's dependency on jQuery.
+
+More thanks to <a href="http://jeffreybarke.net/">Jeffrey Barke</a> who pointed out problems with manual value attributes already existing in the HTML, and the fact that the raw JS version was not handling nested lists properly.
+
+If you want a version that uses jQuery, you can grab the code from <a href="http://jsfiddle.net/ImpressiveWebs/h4JcL/51/">this jsFiddle</a>.
View
11 index.html
@@ -79,6 +79,17 @@
<li>List item five
<li>List item six
</ol>
+
+<p>(The reversed list below has <code>value=55</code> set on a single <code>li</code> element)</p>
+
+<ol reversed>
+ <li>List item one
+ <li>List item two
+ <li value=55>List item three
+ <li>List item four
+ <li>List item five
+ <li>List item six
+</ol>
<p>(The list below uses XHTML syntax for the "reversed" attribute)</p>
View
112 js/script.js
@@ -1,43 +1,69 @@
-if (!('reversed' in document.createElement('ol'))) (function () {
-
- // run the code on each ordered list with a 'reversed' attribute.
- var lists = document.getElementsByTagName('ol'),
- length = lists.length,
- i,
- j,
- childrenLength = 0,
- child = null
- currCount = null,
- currChildren = null;
-
- for (i = 0; i < length; i++) {
- child = lists[i];
-
- if (child.getAttribute('reversed') !== null) {
- currChildren = child.getElementsByTagName('li');
- childrenLength = currChildren.length;
- // check the existence of the start attribute
- if (child.getAttribute('start') !== null) {
- // if it exists, convert it to an integer; also ensures even decimal values work
- currCount = +child.start;
-
- // If it wasn't a number, it will return 'NaN'; if so, use the number of list items instead
- if (isNaN(currCount)) {
- currCount = currChildren.length;
- }
-
- // do this if the start attribute is not present
- // the first number is derived from the number of list items
- } else {
- currCount = currChildren.length;
- }
-
- // go through each list item, adding the 'value' attribute plus currCount number
- // then subtract one from currCount so we're ready for the next one
- for (j = 0; j < childrenLength; j++) {
- currChildren[j].setAttribute('value', currCount);
- currCount -= 1;
- }
- }
- }
-})();
+if (!('reversed' in document.createElement('ol'))) {
+
+ (function () {
+ 'use strict';
+ // Run the code on each ordered list with a "reversed" attribute.
+ var lists = document.getElementsByTagName('ol'),
+ length = lists.length,
+ i,
+ j,
+ child,
+ currChildren,
+ childrenLength,
+ start,
+ currCount,
+ val;
+
+ for (i = 0; i < length; i += 1) {
+
+ child = lists[i];
+
+ if (child.getAttribute('reversed') !== null) {
+
+ currChildren = child.getElementsByTagName('li');
+ childrenLength = currChildren.length;
+ start = child.getAttribute('start');
+
+ // Check the existence of the start attribute and if it's
+ // a number.
+ if (start !== null && !isNaN(start)) {
+ currCount = start;
+ } else {
+ // Do this if the start attribute is not present. The first
+ // number is derived from the number of list items.
+ // (Ugh; Do we need double loops to get the correct count?)
+
+ currCount = 0;
+
+ for (j = 0; j < childrenLength; j += 1) {
+
+ if (currChildren[j].parentNode === child) {
+ currCount += 1;
+ }
+
+ }
+ }
+ // Go through each list item, adding the 'value' attribute
+ // plus currCount number then subtract one from currCount
+ // so we're ready for the next one.
+ for (j = 0; j < childrenLength; j += 1) {
+
+ if (currChildren[j].parentNode === child) {
+ // Per spec, if set, the value attribute should be used
+ // and renumbering started from there.
+ val = currChildren[j].getAttribute('value');
+
+ if (val !== null && !isNaN(val)) {
+ currCount = val;
+ }
+
+ currChildren[j].setAttribute('value', currCount);
+ currCount -= 1;
+ }
+ }
+ }
+ }
+
+ }());
+
+}

0 comments on commit 93a7b9d

Please sign in to comment.
Something went wrong with that request. Please try again.