Javascript调用隐藏和存储字符串文本作为LI标签中的变量

Question

Using this question I was able to hide a list element that contained some string text. I'd like to re-use everything within these <LI></LI> tags however someplace else within the page. The entire contents of the LI tags can vary but will share the one common element I'm able to invoke the hide with. Is there some way to adjust this code to store everything found as a variable after I successfully hide it?

Event.observe(window, "load", function(){

$$("li:contains('Full Listing Information:')").invoke("hide");
});

Answer 1

Just assign it to a variable.

var listings;
Event.observe(window, "load", function(){
    listings = $$("li:contains('Full Listing Information:')");
    listings.invoke("hide");
});

Answer 2

Imagine you have a div#output elsewhere on the page, and you want to put the text of your list items into it, each wrapped in an h2. Let's also imagine that you want to leave the other list items (the ones that don't match your selector) alone where they are. This should do the trick:

document.observe('dom:loaded', function(){
  var listings = $$("li:contains('Full Listing Information:')").invoke('hide').map(function(elm){ return elm.innerText });
  var t = new Template('<h2>#{text}</h2>')
  listings.each(function(str){
    $('output').insert(t.evaluate({text: str}))
  });
});

Inside the first line, you first hide each of the matching list items, then extract the text content from them into an array. The last three lines iterate over that array, building a new h2 each turn, and inserting it into your recipient div. The outer wrapper just makes certain that the DOM is stable before you run this. It can run before the rest of the page is visible, so you shouldn't have the Flash Of Unstyled Content to worry about.