Question

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

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标记内的变量

2 个答案: