Javascript：按假属性对元素进行排序答案

【问题标题】：Javascript: Sort elements by fake propertyJavascript：按假属性对元素进行排序
【发布时间】：2012-03-17 12:49:56
【问题描述】：

我正在尝试制作一个 Javascript 脚本，该脚本会在一定时间后从新选项卡中的元素打开链接。我已经完成了与打开它相关的所有工作，但我似乎无法正确排序我的元素列表。

我的代码如下：

function clickElement() {
    var e=document.getElementsByTagName("area");

    for (var i=0;i < e.length; i++) {
        var link=e[i].href;
        window.open(link);
    }
}

网页上的代码如下：

<area href="someWebsite" "=" shape="rect" coords="0, 0, 10, 10" />
<area href="someOtherWebsite" "=" shape="rect" coords="0, 10, 10, 20" />
<area href="someThirdWebsite" shape="rect" coords="10, 0, 20, 10" />
<area href="someFourthWebsite" "=" shape="rect" coords="10, 10, 20, 20" />

如您所见，我首先列出了页面上的所有区域元素。我现在想对这些区域元素进行排序，以便第一个具有“假”属性（在某些元素上的 href="" 和 shape="" 之间看到的 "="）是打开的元素。 fake 属性在每次页面加载时都会发生变化，因此代码无法知道第一个、第二个、第三个或第四个是否有一个，只能以与我找到 href 属性类似的方式检查它。

你们中有人知道怎么做吗？由于没有属性名称，只有一个值 ("=")，我不能说 "e[i].="。请记住，我只能访问 Javascript，无法编辑 HTML。

【问题讨论】：

好吧“=”无效，你应该添加一个普通的属性或类，上面写着“SELECT ME”

标签： javascript properties area

【解决方案1】：

这不适用于您向我们展示的 html ......但这是解决方案

<area href="someWebsite" "=" shape="rect" coords="0, 0, 10, 10" />
<area href="someOtherWebsite" "=" shape="rect" coords="0, 10, 10, 20" />
<area href="someThirdWebsite" shape="rect" coords="10, 0, 20, 10" />
<area href="someFourthWebsite" first="1" shape="rect" coords="10, 10, 20, 20" />

这里是javascript

function clickElement() {
    var e=document.getElementsByTagName("area");

    // First open the one with first attribute
    for (var i=0;i < e.length; i++) if( e[i].getAttribute( 'first' )) {
        var link=e[i].href;
        window.open(link);
    }

    // Then open others
    for (var i=0;i < e.length; i++) if( !e[i].getAttribute( 'first' )) {
        var link=e[i].href;
        window.open(link);
    }
}

【讨论】：

【解决方案2】：

我认为您没有意识到只是您的 HTML 有多无效。我用你的一个<area> 元素创建了一个页面，在 Firefox 中打开它，并使用了一些 JavaScript 来获取属性名称和值。他们是：

 name          value
--------      -------------------
 href          someFourthWebsite
 "             shape=
 rect"
 coords        10, 10, 20, 20

请注意，没有shape="rect" 属性；相反，shape 已成为 " 属性的一部分，rect" 已成为单独的属性。（本质上，Firefox 允许 " 出现在属性名称中，但在这种情况下没有赋予它任何特殊含义作为分隔符。显然其他浏览器可能会以不同的方式处理这个问题：它非常无效，而且所有的赌注都被取消了。）

所以我怀疑你的 HTML 总体来说没什么用，不仅仅是为了这个目的。

但是，您可以做的一件事是检查元素parentNode 的innerHTML，并找出第一个"=" 的位置：

var totalHTML =
  document.getElementsByTagName('area')[0].parentNode.innerHTML.toLowerCase();
var weirdAttrIndex = totalHTML.indexOf('"="');
var i = -1;
var areaIndex = 0;
while(true)
{ areaIndex = totalHTML.indexOf('<area', areaIndex);
  if(areaIndex < 0 || areaIndex > weirdAttrIndex)
    break;
  ++i;
}
window.open(document.getElementsByTagName('area')[i].href);

我不认为这是非常可靠的，因为在存在无效的 HTML 的情况下，谁知道会发生什么？但这是一个开始。

【讨论】：