jQuery .toArray()
를 이용한 객체(요소와 요소내용 등)를 배열로 변환하기!
<html>
<!--과일-->
<ol class="fruit">
<li>딸기</li>
<li>사과</li>
<li>포도</li>
<li>바나나</li>
</ol>
<!--자동차-->
<div class="car">포르쉐</div>
<div class="car">아우디</div>
<div class="car">벤츠</div>
<br/>
<!--결과-->
<button type="button" class="result_fruit">결과보기(과일)</button>
<button type="button" class="result_car">결과보기(자동차)</button>
<div class="result"></div>
<div class="result"></div>
<style>
.result {
font-weight: bold;
}
<script>
(function() {
// 요소 내용을 배열로 만드는 함수
function elemArr(arr) {
var arrObj = [];
for (var i = 0; i < arr.length; i++) {
arrObj.push(arr[i].innerHTML);
}
return arrObj;
}
// 변수 선언
// toArray() : jQuery 를 포함하는 모든 요소를 검색하여 배열로 만듭니다.(인수X)
var fruit = $(".fruit li").toArray(); // 과일
var car = $(".car").toArray(); // 자동차
// 요소를 배열로 변환
console.log(fruit); // [li, li, li, li], object(객체)
console.log(car); // [div.car, div.car, div.car], object(객체)
// 요소 내용을 배열로 변환 (핵심은 여기!)
console.log(elemArr(fruit)); // ["딸기", "사과", "포도", "바나나"]
console.log(elemArr(car)); // ["포르쉐", "아우디", "벤츠"]
// 결과
// .join() : 지정된 구분 문자열로 구분되는 배열의 모든 요소를 추가합니다.
$("button").on("click", function() {
if ($(this).hasClass("result_fruit")) {
$(".result:first").text(elemArr(fruit).join(" / "));
} else if ($(this).hasClass("result_car")) {
$(".result:last").text(elemArr(car).join(" / "));
}
});
})();
출처: http://thesecondtime.tistory.com/entry/객체요소와-요소내용-등를-배열로-변환하기 [디자이너에서 개발자로]
'웹퍼블리싱 > jquery' 카테고리의 다른 글
| 특정 글자를 찾아서 css 바꾸기 :contains('특정글자') (0) | 2018.07.27 |
|---|---|
| 제이쿼리 sort() 순서 정렬 (0) | 2018.07.25 |
| 제이쿼리 추출 값 정수형으로 바꾸기 parseInt() (0) | 2018.07.11 |
| 함수 두개 toggle 시키기 (0) | 2018.07.11 |
| 슬라이드 메뉴 만들기( feat.배경 안움직이게 하기) (0) | 2018.07.11 |
댓글