【问题标题】:Need help creating dynamic Javascript Arrays需要帮助创建动态 Javascript 数组
【发布时间】:2011-03-08 00:18:53
【问题描述】:

第一部分: 我试图弄清楚如何使用 DOM 和 Javascript 来创建一个包含多个列表中的链接的数组。 问题是我需要每个 UL 都有一个包含链接的唯一数组;我唯一能做到的唯一 ID 在这种情况下使用的是链接标签中的名称值。我将无法在标记中添加任何其他内容。 javascript 引用将需要包含在单个脚本中,其中一个对脚本的引用位于 页面底部。

第二部分: 我最终需要做的是隐藏每个列表,并用前两个链接替换它们, 以及两个链接下方的“查看全部”链接,单击该链接会将其他两个链接添加到列表中。

同样,我不能添加任何标记、div 等;它必须完全基于以下信息、DOM 和 javascript。

感谢大家提供的任何帮助!

<ul>
    <li>
        <a href="#" name="obj_a">Section One, Article One</a>
    </li>
    <li>
        <a href="#" name="obj_b">Section One, Article Two</a>
    </li>
    <li>
        <a href="#" name="obj_c">Section One, Article Three</a>
    </li>
    <li>
        <a href="#" name="obj_d">Section One, Article Four</a>
    </li>
</ul>

<ul>
    <li>
        <a href="#" name="obj_e">Section Two, Article One</a>
    </li>
    <li>
        <a href="#" name="obj_f">Section Two, Article Two</a>
    </li>
    <li>
        <a href="#" name="obj_g">Section Two, Article Three</a>
    </li>
    <li>
        <a href="#" name="obj_h">Section Two, Article Four</a>
    </li>
</ul>

【问题讨论】:

  • 有一个明确的Software Requirements Document就好了。你做了什么?
  • 关于第二部分中描述的最终目标(很好,你提到了它):我不会使用第一部分中描述的列表数组来做到这一点。如果你不能改变标记,我会动态地为所有列表项添加一个类,除了前两个,例如.extra-item 等,并添加一个按钮/跨度/任何带有 onclick 事件的按钮,用于切换 ul 的类名,例如到.invisible。如果您在 CSS 中添加.invisible .extra-item { display: none },则在单击切换按钮/span/whatever 时,除了前两个之外的所有项目都将被隐藏或显示。

标签: javascript html css dom


【解决方案1】:

我正在使用 jQuery 作为我的解决方案;)

第一部分:

var list = new Array();
$.each($('ul'), function(index, value) {
  list.push(new Array());
  $.each($(value).find('li a'), function(index2, value2){
    list[list.length - 1].push(value2.href);
  });
});

第二部分:

我真的不明白这些要求,但是看看 jQuery,它确实让这些变得容易。

【讨论】:

  • 听起来 Javascript 库不是一个选项,因为“javascript 引用需要包含在单个脚本中”的要求。是这样吗,OP?
  • 你可以在脚本中添加一个JS-Library,问题出在哪里,你不需要将jQuery放在另一个文件中。
  • 否定;在这种情况下,我确实可以访问 yahoo YUI 库,但不能访问 jQuery。我认为马塞尔的上述想法可能会非常有效。
  • 基本算法还是一样的。它只是使用所有标准函数而不是 jQuery 的便利实用程序更冗长。
  • 另外,使用 jQuery,上面的代码可以更简洁地写成$("ul:has(li&gt;a)").map(function (item) { return $(item).find("a").filter(function (index) { return index &lt; 2; }) })。事实上,您正在重新发明 mapfilter 函数。
猜你喜欢
  • 2013-12-08
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-08-25
  • 1970-01-01
  • 2016-02-17
  • 1970-01-01
  • 2020-03-06
相关资源
最近更新 更多