Mootools-using-arrays

提供：Dev Guides
2020年6月23日 (火) 07:30時点におけるMaintenance script (トーク | 投稿記録)による版 (Imported from text file)
(差分) ← 古い版 | 最新版 (差分) | 新しい版 → (差分)
移動先:案内、検索

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>

次の出力が表示されます-

出力

「https://www.finddevguides.com/index.php?title=Mootools-using-arrays&oldid=27781」から取得
Powered by MediaWiki