Mootools-using-arrays
MooTools-配列の使用
MooToolsは、動的なWebページの作成を支援する軽量のJavaScriptライブラリです。 DOM要素を管理しながら、WebページのすべてのDOM要素を選択する必要があります。 このコレクションは配列を使用して処理できます。
この章では、配列を使用してDOM要素を管理する方法について説明します。
each()メソッド
これは配列を扱う基本的な方法です。 リストを介してすべての要素を繰り返します。 要件に基づいてこの方法を使用できます。 たとえば、ページのすべてのdiv要素を選択する場合は、以下のスクリプトに従ってください。 複数のdivを含む次のhtmlページをご覧ください。
<div>One</div>
<div>Two</div>
次のスクリプトを使用して、ページ上のdivのコレクションから*個々のdiv *を選択できます。 スクリプトは各divを選択し、アラートを渡します。 次のスクリプトを見てください。
スクリプト
$$('div').each(function() {
alert('a div');
});
次の構文を使用して、上記の例を処理できます。 HTMLページをご覧ください。
スクリプト
<div id = "body_div">
<div>One</div>
<div>Two</div>
</div>
ここでは、2つのdivが別のdiv( body_div )で囲まれています。 スクリプトを設計する際、外部divを1つだけ選択する必要があります。 後で、getElements()メソッドを使用して、2つの内部divを選択できます。 次のスクリプトを見てください。
スクリプト
$('body_wrap').getElements('div').each(function() {
alert('a div');
});
別の方法を使用して、上記のスクリプトを次のように記述できます。 ここでは、個別の変数を使用して body_div を選択しています。
スクリプト
var myArray = $('body_div').getElements('div');
myArray.each(function() {
alert('a div');
});
配列から特定の要素を選択する
要素の配列を操作しながら、要素の配列から特定の要素を選択できます。 以下は、DOM要素を操作するために使用されるいくつかの重要な方法です-
getLast()
このメソッドは、配列の最後の要素を返します。 このメソッドを理解するために配列を設定しましょう。
var myArray = $('body_div').getElements('div');
これで、配列内の最後の要素を取得できます。
var lastElement = myArray.getLast();
変数 lastElement は、myArray内の最後の要素を表します。
getRandom()
getRandom()メソッドはgetLast()メソッドと同様に機能しますが、配列からランダムな要素を取得します。
構文
var randomElement = myArray.getRandom();
変数 randomElement は、 myArray 内でランダムに選択された要素を表します。
配列のコピー
MooToolsは、&dollar; A()関数を使用して配列をコピーする方法を提供します。 以下は、&dollar; A()関数の構文です。
構文
var <variable-name> = $A ( <array-variable>);
配列に要素を追加する
配列に要素を追加するには、2つの異なる方法があります。 最初の方法では、要素を1つずつ追加するか、2つの異なる配列を1つにマージできます。
含める()
include()メソッドは、DOM要素の配列にアイテムを追加するために使用されます。 たとえば、2つのdiv要素と1つの囲まれたdivの下にある1つのspan要素を含む次のHTMLコードを考えてみましょう— body_div 。
構文
<div id = "body_div">
<div>one</div>
<div>two</div>
<span id = "add_to_array">add to array</span>
</div>
上記のコードでは、 body_div 要素でgetElements( 'div')メソッドを呼び出すと、1つと2つのdivを取得しますが、span要素は配列に含まれません。 配列に追加する場合は、配列変数で* include()*メソッドを呼び出します。 次のスクリプトを見てください。
スクリプト
//creating array variable by selecting div elements
var myArray = $('body_wrap').getElements('div');
//first add your element to a var
var newToArray = $('add_to_array');
//then include the var in the array
myArray.include(newToArray);
現在、myArrayにはdivとspan要素の両方が含まれています。
結合する
このメソッドは、ある配列の要素を別の配列の要素と結合するために使用されます。 これにより、コンテンツの重複も処理されます。 たとえば、2つのdiv要素と、単一の囲まれたdivの下にある2つのspan要素( body_div )を含む次のHTMLコードを考えます。
構文
<div id = "body_div">
<div>one</div>
<div>two</div>
<span class = "class_name">add to array</span>
<span class = "class_name">add to array, also</span>
<span class = "class_name">add to array, too</span>
</div>
上記のコードでは、 body_div 要素でgetElements( 'div')メソッドを呼び出します。 1つと2つのdivを取得します。 &dollar;&dollar;( '。class_name')メソッドを呼び出して、2つのスパン要素を選択します。 これで、div要素の1つの配列とspan要素の別の配列ができました。 これら2つの配列をマージする場合は、combined method()を使用できます。 次のスクリプトを見てください。
スクリプト
//create your array just like we did before
var myArray= $('body_wrap').getElements('div');
//then create an array from all elements with .class_name
var newArrayToArray = $$('.class_name');
//then combine newArrayToArray with myArray
myArray.combine(newArrayToArray );
現在、myArrayにはnewArrayToArray変数のすべての要素が含まれています。
例
これは、MooToolsの配列を理解するのに役立ちます。 divとspanを含む要素の配列に背景色を適用するとします。 次のコードを見てください。 ここでは、要素の2番目の配列はどのidまたはクラスグループにも属していないため、背景色を反映していません。 次のコードを見てください。
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var myArray = $('body_wrap').getElements('.class_name');
var addSpan = $('addtoarray');
var addMany = $$('.addMany');
myArray.include(addSpan);
myArray.combine(addMany);
var myArrayFunction = function(item) {
item.setStyle('background-color', '#F7DC6F');
}
myArray.each(myArrayFunction);
});
</script>
</head>
<body>
<div id = "body_wrap">
<div class = "class_name">one</div>
<div>two</div>
<div class = "class_name">three</div>
<span id = "addtoarray">add to array</span>
<br/><span class = "addMany">one of many</span>
<br/><span class = "addMany">two of many</span>
</div>
</body>
</html>
次の出力が表示されます-
出力