5

JavaScript を使用して HTML 属性をソートするにはどうすればよいですか?

私はこのHTMLを持っています:

<table>
    <tbody>
        <tr>
            <td>Cell 0,0</td>
            <td>Cell 1,0</td>
            <td>Cell 2,0</td>
        </tr>
        <tr>
            <td>Cell 0,1</td>
            <td rowspan="2" colspan="2">Cell 1,1
                <br>Cell 2,1
                <br>Cell 1,2
                <br>Cell 2,2</td>
        </tr>
        <tr>
            <td>Cell 0,2</td>
        </tr>
    </tbody>
</table>

そして、すべての要素のすべての属性をアルファベット順にソートしたいと思います。例えば：

<td colspan="2" rowspan="2">Cell 1,1

並べ替え関数は、HTML 文字列、jQuery オブジェクト、またはノードのいずれかに基づいている可能性があります (どれでもかまいません)。

これが必要な理由は、2 セットの HTML と属性の順序の間で差分 (JS を使用して、単体テストが失敗した後) を行っているためです。

だから私の質問は：

ノードの属性を並べ替えるにはどうすればよいですか? または HTML 文字列の属性を並べ替えるにはどうすればよいですか? または jQuery 要素の属性を並べ替えるにはどうすればよいですか?

どの方法が最適なのかわからないため、まだコードを取得していません。

4

3 に答える 3

3

なぜJavaScriptでこれを行う必要があるのか​​ わかりませんが、かなり興味がありました. さて、仕様に従って：

NamedNodeMap インターフェイスを実装するオブジェクトは、名前でアクセスできるノードのコレクションを表すために使用されます。NamedNodeMap は NodeList から継承しないことに注意してください。NamedNodeMap は、特定の順序で維持されるわけではありません。NamedNodeMap を実装するオブジェクトに含まれるオブジェクトは、序数インデックスによってもアクセスできますが、これは単に NamedNodeMap の内容を便利に列挙できるようにするためであり、DOM がこれらのノードの順序を指定することを意味するものではありません。

数字のインデックスを変更することで注文できるので、しばらくすると Chrome でスムーズに動作する私の試みがあります。

(function(){
  var xpath = '//table/tbody/tr[2]/td[2]',
      attrs = document.evaluate(xpath, document, null, XPathResult.ANY_TYPE, null),
      serializer = new XMLSerializer(),

      el = attrs.iterateNext(),
      act = el.attributes,

      i = act.length,
      _l = i,
      _nodeArr = [],
      _nodeArrKeys = [],
      name;

  console.log(serializer.serializeToString(el));

  for (i ;i--;) {
    name = act[i].nodeName;
    _nodeArr[name] = (act.removeNamedItem(name));
    _nodeArrKeys[i] = name;
  }

  _nodeArrKeys = _nodeArrKeys.sort();
  i++;

  for (i;_l>i;i++) {
    act.setNamedItem(_nodeArr[_nodeArrKeys[i]]);
  }

  console.log(serializer.serializeToString(el));
})();

コンソールログ出力

<td zataa="123" bbbrowspan="2" cccattr="val" aaacolspan="2">Cell 1,1
                    <br>Cell 2,1
                    <br>Cell 1,2
                    <br>Cell 2,2</td>

<td aaacolspan="2" bbbrowspan="2" cccattr="val" zataa="123">Cell 1,1
                    <br>Cell 2,1
                    <br>Cell 1,2
                    <br>Cell 2,2</td>
于 2012-12-06T23:50:01.260 に答える
2

本当に必要な場合は...このフィドルを試してください。私は言わなければなりませんが、なぜあなたがこれをやりたいのか
、私は本当に興味があります.

コード：

var elements = document.getElementsByTagName("*");
sortAttributes(elements);

//From: http://stackoverflow.com/questions/979256/how-to-sort-an-array-of-javascript-objects
function sortBy(field, reverse, primer) {
    var key = function(x) {
        return primer ? primer(x[field]) : x[field];
    };

    return function(a, b) {
        var A = key(a),
            B = key(b);
        return ((A < B) ? -1 : (A > B) ? +1 : 0) * [-1, 1][+ !! reverse];
    }
};

function sortAttributes(elements) {
    for (var j = 0; j < elements.length; j++) {
        var attributes = [];
        for (var i = 0; i < elements[j].attributes.length; i++) {
            attributes.push({
                'name': elements[j].attributes[i].name,
                'value': elements[j].attributes[i].value
            });
        }

        var sortedAttributes = attributes.sort(sortBy('name', true, function(a) {
            return a.toUpperCase();
        }));

        for (var i = 0; i < sortedAttributes.length; i++) {
            $(elements[j]).removeAttr(sortedAttributes[i]['name']);
        }

        for (var i = 0; i < sortedAttributes.length; i++) {
            $(elements[j]).attr(sortedAttributes[i]['name'], sortedAttributes[i]['value']);
        }
    }
}
于 2012-12-06T22:34:39.040 に答える
0

Prettydiffを使用するだけです。HTML を美しくするときに、属性をアルファベット順に並べ替えます。JavaScriptで書かれています。

于 2012-12-13T23:42:01.030 に答える