map()
通过一个函数匹配当前集合中的每个元素,产生一个包含新的jQuery对象。
.map(callback(index, domElement))
- callback(index, domElement)类型: Function()一个函数对象,会在处理集合中的每个元素时被调用。
如果你想处理一个简单的数组或对象中,使用jQuery.map()代替。
由于返回值是一个jQuery包裹的数组,所以通常会使用get()
方法将其转换成普通的数组。
.map()
方法特别适用于获取或设置元素集合中的值。例如,如下的表单中包含一组 checkbox 框:
<form method="post" action=""> <fieldset> <div> <label for="two">2</label> <input type="checkbox" value="2" id="two" name="number[]"> </div> <div> <label for="four">4</label> <input type="checkbox" value="4" id="four" name="number[]"> </div> <div> <label for="six">6</label> <input type="checkbox" value="6" id="six" name="number[]"> </div> <div> <label for="eight">8</label> <input type="checkbox" value="8" id="eight" name="number[]"> </div> </fieldset> </form>
我们可以得到一个用逗号分隔的复选框ID
:
$(':checkbox').map(function () {return this .id; }).get().join();
此调用的结果是字符串,"two,four,six,eight"
.
在回调函数中,this
指向每次迭代中的当前DOM元素。该函数可以返回一个单独的数据或数据数组,并在结果集合中插入。如果数组返回,数组中的元素插入到集合。如果函数返回null
或undefined
,没有元素将被插入。
例子:
获取表单中所有表单元素的值。
<!DOCTYPE html> <html> <head> <style> p { color:red; } </style> <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.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="https://www.lanmper.cn" /> </form> <script> $("p").append( $("input").map(function (){return $(this ).val(); }).get().join(", ") ); </script> </body> </html>
Values:
一个展示一些功能的人为示例。
<!DOCTYPE html> <html> <head> <style> body { font-size:16px; } ul { float:left; margin:0 30px; color:blue; } #results { color:red; } </style> <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script> </head> <body> <ul> <li>First</li> <li>Second</li> <li>Third</li> <li>Fourth</li> <li>Fifth</li> </ul> <ul id="results"> </ul> <script>var mappedItems = $("li").map(function (index) {var replacement = $("<li>").text($(this ).text()).get(0);if (index == 0) { /* make the first item all caps */ $(replacement).text($(replacement).text().toUpperCase()); }else if (index == 1 || index == 3) { /* delete the second and fourth items */ replacement = null; }else if (index == 2) { /* make two of the third item and add some text */ replacement = [replacement,$("<li>").get(0)]; $(replacement[0]).append("<b> - A</b>"); $(replacement[1]).append("Extra <b> - B</b>"); } /* replacement will be a dom element, null, or an array of dom elements */return replacement; }); $("#results").append(mappedItems); </script> </body> </html>
- First
- Second
- Third
- Fourth
- Fifth
均衡div的高度。
<!DOCTYPE html> <html> <head> <style> div { width: 40px; float:left; } input { clear:left} </style> <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script> </head> <body> <input type="button" value="equalize div heights"> <div style="background:red; height: 40px; "></div> <div style="background:green; height: 70px;"></div> <div style="background:blue; height: 50px; "></div> <script> $.fn.equalizeHeights =function () {var maxHeight =this .map(function (i,e) {return $(e).height(); }).get();return this .height( Math.max.apply(this , maxHeight) ); }; $('input').click(function (){ $('div').equalizeHeights(); }); </script> </body> </html>