1

dojo.queryを使用して要素にidを追加しようとしています。それが可能かどうかはわかりませんが。以下のコードを使用してIDを追加しようとしていますが、機能しません。

dojo.query('div[style=""]').attr("id","main-body");

<div style="">
  content
</div>

これが不可能な場合、それを行う別の方法はありますか？javascriptまたはjqueryを使用していますか？ありがとう。

4

2 に答える 2

1

要素に id を追加する方法は正しいです。

コードは Firefox 17 と Chrome 23 では正常に動作しますが、IE9 では問題があります。あなたも同じ問題を抱えているのではないかと思います。

IE9 では、クエリdiv[style=""]は結果を返しません。面白いことに、互換モードで問題なく動作します。

通常モードのIE9では、HTML 要素にインラインの空のスタイル属性がある場合、要素が DOM に追加されたときにその属性が保持されないようです。

したがって、解決策は、別のクエリを使用して必要な div を見つけることです。スタイル属性が空の、またはスタイル属性がまったくない div を見つけることができます。

次のようなクエリが機能するはずです。

div[style=""], div:not([style])

次の例を見てください。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test Page</title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.8.2/dojo/dojo.js"></script>
    <script type="text/javascript">
        dojo.require("dojo.NodeList-manipulate");//just for the innerHTML() function

        dojo.addOnLoad(function () {
            var nodeListByAttr = dojo.query('div[style=""], div:not([style])');
            alert('Search by attribute nodeList length:' + nodeListByAttr.length);
            nodeListByAttr.attr("id", "main-body");

            var nodeListByID = dojo.query('#main-body');
            alert('Search by id nodeList length:' + nodeListByID.length);
            nodeListByID.innerHTML('Content set after finding the element by ID');
        });
    </script>
</head>
<body>
    <div style="">
    </div>
</body>
</html>

お役に立てれば

于 2012-12-15T08:53:59.607 に答える
1

@Nikanos の回答はクエリの問題をカバーしています。追加したいのは、どのクエリでも要素の配列が返されるということです。Dojo の場合はdojo/NodeList.

id問題は、特にクエリを含む複数の DOM ノードに同じものを割り当てようとしていることですdiv:not([style])。の最初のdiv子のbodyような、より具体的なクエリを使用することをお勧めします:

var nodes = dojo.query('body > div:first-child');    
nodes.attr("id", "main-body");

より堅牢にするために、すべてのノードを操作するのではなく、最初のノードだけを操作します (1 つだけにする必要があります)。

dojo.query('body > div:first-child')[0].id = "main-body";

これは IE9 でも機能します。実際の動作をご覧ください: http://jsfiddle.net/phusick/JN4cz/

Modern Dojoで書かれた同じ例: http://jsfiddle.net/phusick/BReda/

于 2012-12-15T09:44:14.757 に答える