http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_DHTML%2FjQuery%2Fmap
JavaScript DHTML/jQuery/map - История изменений
2026-04-04T07:54:50Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=JavaScript_DHTML/jQuery/map&diff=2814&oldid=prev
в 10:02, 26 мая 2010
2010-05-26T10:02:45Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 10:02, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
http://wbex.ru/index.php?title=JavaScript_DHTML/jQuery/map&diff=2815&oldid=prev
Admin: 1 версия
2010-05-26T07:23:52Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==Add LI to UL==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
var mappedItems = $("li").map(function (index) {<br />
var data = $("<li>").text($(this).text()).get(0);<br />
$(data).text($(data).text().toUpperCase());<br />
return data;<br />
});<br />
$("#results").append(mappedItems);<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<ul><br />
<li>asdf</li><br />
<li>asdf</li><br />
<li>asdf</li><br />
</ul><br />
<ul id="results"><br />
</ul><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Add node to tag==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
<br />
var list = $("div,p").map(function () {<br />
return this.tagName;<br />
}).get().join(", ");<br />
<br />
<br />
$("b").append(document.createTextNode(list));<br />
});<br />
</script><br />
</head><br />
<body><br />
<span>span</span><br />
<p>p</p><br />
<div>div</div><br />
<b>bold</b><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Find all parent elements of each paragraph.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
var parentEls = $("p").parents()<br />
.map(function () { <br />
return this.tagName; <br />
})<br />
.get().join(", ");<br />
$("p").append("<strong>" + parentEls + "</strong>");<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<div><p>Hello</p></div><br />
<div class="selected"><p>Hello Again</p></div><br />
<br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Map and index==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
<br />
var mappedItems = $("li").map(function (index) {<br />
var replacement = $("<li>").text($(this).text()).get(0);<br />
if (index == 0) {<br />
$(replacement).text($(replacement).text().toUpperCase());<br />
} <br />
return replacement;<br />
});<br />
$("#results").append(mappedItems);<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<ul><br />
<li>Abc</li><br />
<li>Bcd</li><br />
<li>Cde</li><br />
</ul><br />
<ul id="results"><br />
</ul><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Map and isNaN==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
var strings = ["1","2","3","4","S","6"];<br />
var values = $.map(strings,function(value){<br />
var result = new Number(value);<br />
return isNaN(result) ? null : result;<br />
});<br />
alert(values);<br />
var values = ["this","that","other thing"];<br />
$.map(values,function(value){<br />
return value.split("");<br />
})<br />
alert(values);<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<p id="followMe">Follow me!</p><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Map and split==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
var strings = ["1","2","3","4","S","6"];<br />
var values = $.map(strings,function(value){<br />
var result = new Number(value);<br />
return isNaN(result) ? null : result;<br />
});<br />
alert(values);<br />
var values = ["this","that","other thing"];<br />
$.map(values,function(value){<br />
return value.split("");<br />
})<br />
alert(values);<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<p id="followMe">Follow me!</p><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==map(callback) builds lists of values, attributes, css values==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
<br />
$("p").append( $("input").map(function(){<br />
return $(this).val();<br />
}).get().join(", ") );<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<p></p><br />
<form><br />
<br />
<input type="text" name="name" value="A"/><br />
<input type="text" name="password" value="B"/><br />
</form><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Map each parents==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
var parentEls = $("span").parents()<br />
.map(function () { <br />
return this.tagName; <br />
})<br />
.get().join(", ");<br />
$("span").append(parentEls);<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<div><br />
<p><br />
<span><br />
</span><br />
</p><br />
</div><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==map function and switch==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(<br />
function() {<br />
var $mapped = $("li").map(<br />
function($key) {<br />
switch (true) {<br />
case ($(this).hasClass("my2")): {<br />
return $(this).text() + " <i>C</i>";<br />
}<br />
case ($(this).hasClass("my3")): {<br />
return $(this).text() + " <i>B</i>"; <br />
}<br />
case ($(this).hasClass("my")): {<br />
return $(this).text() + " <i>my Harrison</i>"; <br />
}<br />
}<br />
}<br />
);<br />
$("ul#ulId").hide();<br />
<br />
$($mapped).each(<br />
function() {<br />
$("ul#tmpMapped").append("<li>" + this + "</li>\n"); <br />
}<br />
);<br />
}<br />
);<br />
</script><br />
<style type="text/css"><br />
ul {<br />
list-style: none;<br />
margin: 5px;<br />
padding: 0;<br />
}<br />
ul li {<br />
position: relative;<br />
background: #eff557;<br />
border: 1px solid black;<br />
padding: 3px;<br />
margin: 2px 0;<br />
}<br />
i {<br />
position: absolute;<br />
top: 3px;<br />
right: 3px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<ul id="ulId"><br />
<li class="my3">A</li><br />
<li class="my2">B</li><br />
<li class="my3">C</li><br />
<li class="my2">D</li><br />
<li class="my">E</li><br />
</ul><br />
<ul id="tmpMapped"><br />
</ul><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Map to join strings==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
<br />
var list = $("div,p").map(function () {<br />
return this.tagName;<br />
}).get().join(", ");<br />
<br />
<br />
$("b").append(document.createTextNode(list));<br />
});<br />
</script><br />
</head><br />
<body><br />
<span>span</span><br />
<p>p</p><br />
<div>div</div><br />
<b>bold</b><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Map value function==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("p").append( $("input").map(function(){<br />
return $(this).val();<br />
}).get().join(", ") );<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<p></p><br />
<form><br />
<input type="text" name="name" value="A"/><br />
<input type="text" name="name" value="B"/><br />
</form><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Map value only==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
var arr = [ "a", "b", "c", "d", "e" ]<br />
<br />
arr = jQuery.map(arr, function(n){<br />
return (n.toUpperCase());<br />
});<br />
<br />
alert(arr);<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<p></p><p></p><p></p><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Map value with index and value==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
var arr = [ "a", "b", "c", "d", "e" ]<br />
<br />
arr = jQuery.map(arr, function(n, i){<br />
return (n.toUpperCase() + i);<br />
});<br />
<br />
alert(arr);<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<p></p><p></p><p></p><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Nested map and each function==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(<br />
function() {<br />
var $items = [<br />
"A",<br />
"B",<br />
"C",<br />
"D"<br />
];<br />
var $i = 0;<br />
var $mapped = $($items).map(<br />
function($key) {<br />
$i++;<br />
return ($i < 2 ? "0" + $i : $i) + " " + this;<br />
}<br />
);<br />
$($mapped).each(<br />
function() {<br />
$("ul#ulId").append("<li>" + this + "</li>\n"); <br />
}<br />
);<br />
}<br />
);<br />
</script><br />
</head><br />
<body><br />
<ul id="ulId"><br />
</ul><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Traversing-Map==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("p").append( $("input").map(function(){<br />
return $(this).val();<br />
}).get().join(", ") );<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<p></p><br />
<form><br />
<input type="text" name="name" value="A"/><br />
<input type="text" name="name" value="B"/><br />
</form><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Use map to join the selected tag names==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
<br />
var list = $("div,p,span").map(function () {<br />
return this.tagName;<br />
}).get().join(", ");<br />
<br />
<br />
$("b").append(document.createTextNode(list));<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<span>span</span><br />
<p>p</p><br />
<div>div</div><br />
<span>span</span><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Use variable defined outside in map function==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(<br />
function() {<br />
var $items = [<br />
"A",<br />
"B",<br />
"C",<br />
"D"<br />
];<br />
var $i = 0;<br />
var $mapped = $($items).map(<br />
function($key) {<br />
$i++;<br />
return ($i < 2 ? "0" + $i : $i) + " " + this;<br />
}<br />
);<br />
$($mapped).each(<br />
function() {<br />
$("ul#ulId").append("<li>" + this + "</li>\n"); <br />
}<br />
);<br />
}<br />
);<br />
</script><br />
</head><br />
<body><br />
<ul id="ulId"><br />
</ul><br />
</body><br />
</html><br />
<br />
</source></div>
Admin