ホームページ > 記事 > ウェブフロントエンド > jQueryでのマップの使用法は何ですか
jQueryでのマップの使用法は何ですか
- WBOYオリジナル
- 2022-04-02 16:04:343510ブラウズ
使用法: 1. 新しい jQuery オブジェクトを生成する関数を通じてコレクションに要素を渡すために使用されます。構文は ".map(callback(index,domElement))" です。 2. 配列内の要素を処理するために使用されます.要素を取得し、結果を新しい配列としてカプセル化して返す場合、構文は「$.map (配列またはオブジェクト、指定された関数)」です。
このチュートリアルの動作環境: 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>出力結果:
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でのマップの使用法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。