<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.js"></script>
<script>
$(function(){
var result = new Array();
var result2 = new Array();
console.log('$("b").parents(): ', $("b").parents());
$("b").parents().each(function(i){
// result[i] = this.tagName;
result[i] = $(this).prop('tagName');
});
// reverse() : 배열의 순서를 역순으로 가져오기
// join("구분 문자열")함수 : 배열 요소값을 '구분 문자열'로 연결하여 문자열 값으로 반환.
// 인수값이 있을 경우 기본적으로 '구분 문자열'로 추가됨.
// 연결값이 없을 경우(예:마지막 연결값", ") '구분 문자열' 적용되지 않음.
// result => [span, p, div, body, html]
$("b").append(result.join(", "));
// result.reverse() = > ['HTML', 'BODY', 'DIV', 'P', 'SPAN']
// $("b").append(result.reverse().join(", "));
$("em").parent().each(function(i, o){
result2[i] = this.tagName;
});
$("em").append(result2.join(", "));
});
</script>
</head>
<body>
<div>
<!-- span < p < div < body < html -->
<p><span><b>부모 엘리먼트 모두 검색: </b></span></p>
</div>
<div>
<p><span><em>부모 엘리먼트 검색: </em></span></p>
</div>
</body>
</html>
$.map() $.grep()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.js"></script>
<script>
$(function(){
/*
형식: $.map(배열객체, 콜백함수);
- 해당 배열객체에서 값을 받아 콜백함수를 통해 반환받은 값으로 새로운 배열을 만든다.
콜백함수(callback) : 매개변수로 함수를 전달하는 것을 말하며, 전달받은 함수를 함수의 내부에서 실행시킨다.
*/
var arr1 = $.map([5,7,2], function(n){
return n + 4;
});
document.write("arr1배열: " + arr1);
document.write("<br>==== first End ==== <br><br>");
// 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14
var arr2 =[1,9,3,8,6,1,5,9,4,7, 3, 8, 6, 9, 1];
// 형식: $.grep(배열객체, function(요소, 인덱스){return Boolean값;});
// $.grep() 함수는 배열 요소를 조건에 따라 필터링하여 제거한다.
// 이 조건은 함수로 구성되고 배열의 요소와 인덱스를 인자로 갖는다.
// 즉, 특정 로직에 의해 true가 되는 결과들만 반환됨.
var arr3 = jQuery.grep(arr2, function(n, i){
return (n > 5 && i > 4); //9, 7, 8, 6, 9
});
document.write("arr3배열: " + arr3);
document.write("<br>==== Second End ====");
});
</script>
</head>
<body>
</body>
</html>
