Prototype function different id elements of the same class

I'm making this prototype script to work:

function removing () {
*var ids = $$('.class').collect(function(el) { return el.id; });* //array of ids, not used by now
var data = $$('.class').pluck('innerHTML');
var wanted_count = 10;
var output = cutHtmlString(data, wanted_count);
$$('.class').invoke('replace', output + '...');
}

on this markup:

<div class="class" id="id1">content 1</div>
<div class="class" id="id2>content 2</div>
<div class="class" id="id3>content 3</div>

cutHtmlString is a function that cut html 开发者_如何学Pythonstrings keeping tags and I want to apply it to every different div content. I create 'data' variable (by innerHTML) from general $$(.class) and then I execute cutting by a words count (var wanted_count) into 'output' var.

At the end I replace the original element (by $$.class again) with its new cut content.

All works great except for one issue: using only $$(class) makes only the first element content to be considered and replaced to every others.

I need to identify elements by ids too, I guess..thus I added the commented function upon (collect) but I don't know how to join my target..

By now I only got to this results:

this is the content of firts 'class' div...(cut)

this is the content of firts 'class' div...

this is the content of firts 'class' div...

while I want to get:

this is the content of first 'class' div...

this is the content of second 'class' div...

this is the content of third 'class' div...

thanks guys and an appreciation to this great community whole

I believe you are mixing working on a collection of elements with working on a single element. It's been a while since I've been in Prototype, but have you tried to work on very individually so output is scoped to the element you are replacing:

function removing () {
  var data, output, wanted_count = 10;

  $$('.class').each(function(element){
    output = cutHtmlString(element.innerHTML, wanted_count);
    element.replace(output + '...');
  });
}

Invoke only woks if your padding the same variables to each element. You need to use each. Also I think you want to use update and not replace.

try this.

function removing() {
  $$('.class').each(function(el){
    var output = cutHtmlString(el.innerHTML, 10);
    el.update(output + '...');
  });
}