jQueryでのマップの使用法は何ですか-jsチュートリアル-php.cn

jQueryでのマップの使用法は何ですか

WBOY

リリース： 2022-04-02 16:06:54

オリジナル

3524 人が閲覧しました

使用法: 1. 新しい jQuery オブジェクトを生成する関数を通じてコレクションに要素を渡すために使用されます。構文は ".map(callback(index,domElement))" です。 2. 配列内の要素を処理するために使用されます.要素を取得し、結果を新しい配列としてカプセル化して返す場合、構文は「$.map (配列またはオブジェクト、指定された関数)」です。

jQueryでのマップの使用法は何ですか

このチュートリアルの動作環境: Windows10 システム、jquery3.2.1 バージョン、Dell G3 コンピューター。

jquery でのマップの使用法

1.map() は、関数を通じて各要素を現在の一致するコレクションに渡し、戻り値を含む新しい jQuery オブジェクトを生成します。

Syntax

.map(callback(index,domElement))

ログイン後にコピー

callback(index,domElement) 現在のコレクション内の各要素に対して呼び出される関数オブジェクト。

戻り値は jQuery によってカプセル化された配列であるため、get() を使用して返されたオブジェクトを処理し、基になる配列を取得します。

例は次のとおりです:

<!DOCTYPE html>
<html>
<head>
  <style>p { color:red; }</style>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
  <p><b>Values: </b></p>
  <form>
    <input type="text" name="name" value="John"/>
    <input type="text" name="password" value="password"/>
    <input type="text" name="url" value="http://php.cn/"/>
  </form>
<script>
    $("p").append( $("input").map(function(){
      return $(this).val();
    }).get().join(", ") );
</script>
</body>
</html>

ログイン後にコピー

出力結果:

jQueryでのマップの使用法は何ですか

2, $.map() 関数が使用されます指定された関数を使用する場合配列内の各要素(またはオブジェクトの各属性)を処理し、処理結果を新しい配列としてカプセル化して返します。

jQuery 1.6 より前は、この関数は配列の走査のみをサポートしていましたが、1.6 以降、この関数はオブジェクトの走査もサポートするようになりました。

map() は、2 つのパラメーターも関数に渡します。1 つは現在の反復の要素または属性値で、もう 1 つは現在の反復項目の配列インデックスまたはオブジェクト属性名です。

この関数の戻り値は、結果配列の要素として使用されます。戻り値が null または未定義の場合、結果配列には追加されません。

$.map( object, callback )

ログイン後にコピー

object 配列/オブジェクトタイプは、処理する必要がある配列またはオブジェクトを指定します。

callback 関数タイプは処理関数を指定します。

例は次のとおりです:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
div { color:blue; }
p { color:green; margin:0; }
span { color:red; }
</style>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div></div>
<p></p>
<span></span>
<script>
$(function () { 
var arr = [ "a", "b", "c", "d", "e" ];
$("div").text(arr.join(", "));
arr = $.map(arr, function(n, i){
return (n.toUpperCase() + i);
});
$("p").text(arr.join(", "));
arr = $.map(arr, function (a) {
return a + a;
});
$("span").text(arr.join(", "));
})
</script>
 
</body>
</html>

ログイン後にコピー

出力結果:

jQueryでのマップの使用法は何ですか