Javascript 调用隐藏字符串文本并将其存储为 LI 标记中的变量

Question

使用这个 question 我能够隐藏包含一些字符串文本的列表元素。我想重新使用这些 <LI></LI> 标签中的所有内容，但是在页面中的其他地方。 LI 标签的全部内容可能会有所不同，但会共享一个我可以用来调用隐藏的公共元素。有什么方法可以调整此代码以在我成功隐藏后将找到的所有内容存储为变量吗？

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

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

Answer 1

只需将其分配给一个变量即可。

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

Answer 2

假设您在页面的其他地方有一个 div#output，并且您想要将列表项的文本放入其中，每个都包含在一个 h2 中。我们还假设您想将其他列表项（与您的选择器不匹配的那些）单独留在原处。这应该可以解决问题：

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}))
  });
});

在第一行中，您首先隐藏了每个匹配的列表项，然后将其中的文本内容提取到一个数组中。最后三行遍历该数组，每轮构建一个新的 h2，并将其插入您的接收者 div。外包装只是确保 DOM 在你运行之前是稳定的。它可以运行在页面的其余部分可见之前，因此您不必担心 Flash Of Unstyled Content。

Javascript 调用隐藏字符串文本并将其存储为 LI 标记中的变量

Javascript invoke hide and store string text as variable within LI tag

javascript

prototypejs