I have built a custom button that I am using to make long lists of items show up in a scrollable css div. I'd like to be able to alternate the background colors of these items via css.

What I have is: 

js: eDefSelProcessLines('<div id="scrolling_items">\n', ' <span>', '</span>', '\n</div>');

Which transforms this:

Item 1
Item 2
Item 3

Into this:

<div id="scrolling_items">
<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>
</div>

What I would like is output like this:

<div id="scrolling_items">
<span class="odd_row">Item 1</span>
<span class="even_row">Item 2</span>
<span class="odd_row">Item 3</span>
</div>

But everything I have tried isn't working... anyone have a suggestion?

Comments

ufku’s picture

ufku commented

Try this:

js:
var lines = E.getSelection().split('\n');
var str = '<div id="scrolling_items">';
var class_arr = ['odd', 'even'];
for (var i = 0; i < lines.length; i++) {
  str += '\n <span class="'+ class_arr[i%2] +'">'+ lines[i] +'</span>';
}
str += '\n</div>';
E.replaceSelection(str);

Unlike eDefSelProcessLines, this wont restore the lines on a second click.

ufku’s picture

ufku commented
Status: Active » Closed (fixed)