4

jQueryを使用して画像マップを動的に作成しようとしていますが、奇妙な動作に遭遇しました。

alert( $('<area />').size() );                         // 1
alert( $('<area shape="circle" />').size() );          // 0
alert( $('<area />').attr("shape", "circle").size() ); // 1

つまり、エリアタグを一度に作成することはできません。私が言うなら

$('<area shape="circle" coords="50,25,4" href="#" alt="foo" />')

その後、何も作成されません。ただし、徐々に実行すると機能します。たとえば、

$('<area />')
    .attr("shape", "circle")
    .attr("coords", "50,25,4")
    .attr("href", "#")
    .attr("alt", "foo");

これがなぜなのかわかりません。属性とコンテンツを使用して他のあらゆる種類の要素を作成できるからです。

$('<div id="foo" />')
$('<div id="bar">Hello World!</div>')

だから、なぜこれが機能しないのかはっきりしていません。への呼び出しを連鎖させることでそれを混乱させることができるので、これはそれほど重要ではありませんが、それはattr迷惑であり、この動作を理解したいと思います。

4

1 に答える 1

4

<area />要素は、画像マップ（つまり<map>要素）内でのみ定義されます。したがって、基本的に次のことが失敗します（これは、jQueryがマークアップで実行していることです）。

var div = document.createElement('div');
div.innerHTML = '<area shape="circle" coords="50,25,4" href="#" alt="foo" />';
return div.childNodes; // this is empty, as the browser didn't allow 
                       // the <area /> element inside the <div> element

これは、明らかに優れたjQueryが（まだ）説明していないことの1つにすぎません。それまでの間、次のことを試してください。

var $area = $(
    '<map><area shape="circle" coords="50,25,4" href="#" alt="foo" /></map>'
).contents();

// $area is the jQuery object for the newly created <area /> tag

$area.attr('coords'); // "50,25,4"

// etc
于 2009-11-20T00:51:08.173 に答える