PGR21.com
- PGR21 관련된 질문 및 건의는 [건의 게시판]을 이용바랍니다.
- (2013년 3월 이전) 오래된 질문글은 [이전 질문 게시판]에 있습니다.
통합 규정을 준수해 주십시오. (2015.12.25.)
Date 2024/06/12 01:03:08
Name Mindow
Subject [질문] 개발자분들~ 간단한 자바스크립트(with제이쿼리) 질문 드려요
저는 스크립트 초보라서 헷갈리지만 개발자 분에겐 쉬운 문제일 것 같습니다.

div 박스 4개가 나란히 있다고 가정하고 css로 각자 높이가 100px, 200px, 300px, 400px로 잡혀있다고 가정했을 때

목표는 스크립트로 박스 4개의 높이 중 가장 높은 것 찾아서 변수로 담아서 콘솔로그 찍기입니다.

제 추측으로는 방향이 일단 각각 박스의 값을 배열로 담아서 배열에 있는 애들끼리 비교해서 높은 값 찾으면 될 것 같은데....

제가 생각한 방향은 맞을까요?


아래는 제가 시도한 스크립트 코드입니다.
제이쿼리 세팅 되어있습니다.

$(".box").each(function(){
                let h = $(this).outerHeight();
                let arr = [h];
                console.log(arr);
            });

이렇게 하니까 하나의 배열이 아닌 length 1인 4개의 배열이 콘솔로그로 찍히더군요

arr 라는 변수의 배열 안에 length 4개로 [100, 200, 300, 400]; 이 찍히게 하고 싶은데 잘 안 됩니다.

요기까지만 하면 Math.max.apply 로 높은 값 찾기는 어렵지 않게 될 것 같은데...

each 로 돌린 값들을 하나의 배열에 담는게 어렵습니다


통합규정 1.3 이용안내 인용

"Pgr은 '명문화된 삭제규정'이 반드시 필요하지 않은 분을 환영합니다.
법 없이도 사는 사람, 남에게 상처를 주지 않으면서 같이 이야기 나눌 수 있는 분이면 좋겠습니다."
24/06/12 02:06
수정 아이콘
요런질문은 이 질문 내용 그대로 ChatGPT에 물어보시는게 빠를꺼에요.
24/06/12 10:29
수정 아이콘
와 요즘 챗지피티가 그런 것도 대답해주나보군요 덜덜..
24/06/12 02:44
수정 아이콘
비몽사몽이라 반복문 안에서 굳이 해야 하나 싶긴 한데, 간단히 이런식으로도 구현은 될거에요.
let boxHeights = $(".box").toArray().map(v => $(v).height());
1. boxHeights.sort().reverse()[0];
2. boxHeights.reduce((prev, curr) => prev > curr ? prev : curr);
3. Math.max(...boxHeights);
첫댓 써주신것처럼 우리의 gpt님은 더 자세히 설명을..
24/06/12 10:29
수정 아이콘
답변 감사합니다!!
이동파
24/06/12 08:23
수정 아이콘
Gpt-4o 답변
네, 방향은 맞습니다! `each` 루프 안에서 배열을 선언하게 되면 각 루프마다 새로운 배열이 생성되기 때문에 각각의 높이가 별도의 배열에 들어가게 됩니다. 이를 해결하기 위해 배열을 루프 바깥에서 선언하고, 루프 안에서는 해당 배열에 높이를 추가해주면 됩니다.

다음은 수정된 코드입니다:

```javascript
// 배열을 루프 바깥에서 선언합니다.
let arr = [];

// 각 .box 요소를 순회하며 높이를 배열에 추가합니다.
$(".box").each(function(){
let h = $(this).outerHeight();
arr.push(h); // 배열에 높이를 추가합니다.
});

// 배열을 콘솔에 출력합니다.
console.log(arr);

// 배열에서 가장 높은 값을 찾습니다.
let maxHeight = Math.max.apply(null, arr);

// 가장 높은 값을 콘솔에 출력합니다.
console.log("가장 높은 높이: " + maxHeight + "px");
```

이제 `arr` 배열은 `[100, 200, 300, 400]`처럼 각 박스의 높이를 담게 되고, `Math.max.apply(null, arr)`를 사용하여 가장 높은 값을 찾을 수 있습니다.

위의 코드에서는 `each` 루프 바깥에 `arr` 변수를 선언하고, 각 박스의 높이를 `arr` 배열에 `push` 메서드를 사용하여 추가합니다. 그런 다음, `Math.max.apply(null, arr)`를 사용하여 배열에서 가장 큰 값을 찾습니다.
24/06/12 10:29
수정 아이콘
답변 감사합니다~! 해당 코드 보고 바로 해결했습니다!
상어이빨
24/06/12 08:23
수정 아이콘
arr은 each문 위에 선언하시고
arr.push
24/06/12 10:29
수정 아이콘
감사합니다!
박근혜
24/06/12 13:32
수정 아이콘
chatgpt 가 작성해준 코드입니다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Find Max Height</title>
<style>
.box {
width: 100px;
display: inline-block;
}
.box1 { height: 100px; background-color: lightblue; }
.box2 { height: 200px; background-color: lightgreen; }
.box3 { height: 300px; background-color: lightcoral; }
.box4 { height: 400px; background-color: lightgoldenrodyellow; }
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
let maxHeight = 0;
$('.box').each(function() {
let height = $(this).height();
if (height > maxHeight) {
maxHeight = height;
}
});
console.log("The highest box height is: " + maxHeight + "px");
});
</script>
</body>
</html>
24/06/14 18:54
수정 아이콘
오 배열에 몰아넣고 비교가 아니라 빈 변수에 할당을 계속줘서 비교하는 방법인가보군요 답변감사합니다 그나저나 챗지피티 신기하긴하네요 크크 10년뒤에는 a4지 몇장 분량으로 설명 쭉 쓰면 사이트 하나 뚝딱되겠어요
목록 삭게로! 맨위로
번호 제목 이름 날짜 조회
179528 [질문] 혹시 90년대에 zgzg였나..지그재그였나 브랜드 아시는분 계신가요? [4] 로각좁5423 25/01/31 5423
179527 [질문] 외제차 프로모션 계약할때 기준인가요 [2] 두억시니5092 25/01/31 5092
179526 [질문] 오늘 전세계약을 했는데요 하나 희한한 게 있어서요 [3] 호비브라운5756 25/01/31 5756
179525 [질문] 소유자 입장에서 상가 월세 알아보는 방법이 있을까요? [3] 국힙원탑뉴진스4748 25/01/31 4748
179524 [질문] 이런 게임 없나요? 가칭 스크립트 파이터 [11] kimmo5721 25/01/31 5721
179523 [질문] 미국 흑인 새내기대학생 인사법 유튜브쇼츠 동영상 찾습니다. [1] 루카와4379 25/01/31 4379
179522 [질문] 카카오톡이 핸드폰과 태블릿 중 하나에서만 됩니다. 해결방법을 알려주십시오 [7] 청둥오리5787 25/01/31 5787
179521 [질문] 소설 <삼체> 출판사 별 교차로 읽어도 되나요? [2] 세이밥누님4641 25/01/31 4641
179520 [질문] 쇼파베드 실 사용 하시는 분들 계실까요? [12] allin134588 25/01/31 4588
179519 [질문] 질문. 30대에도 친구 손절 많이 하나요? [28] 마르틴 에덴6509 25/01/31 6509
179518 [질문] 몽골여행을 부모님 모시고 가볼려고 하는데 질문 있습니다!! [2] 모든사이즈에도전5131 25/01/31 5131
179517 [질문] 명절 연휴 출근의 대가는 어느 정도여야 할까요? [18] 가만히 손을 잡으5336 25/01/31 5336
179516 [질문] 핸드폰 카메라가 멀쩡한 상태인지(?) 확인하는 방법이 있을까요? [2] EnergyFlow4115 25/01/31 4115
179515 [질문] 아침 일어나서 1시간 후 공복 운동 vs 사과 한 알 먹고 1시간 후 운동 [5] 그때가언제라도4851 25/01/31 4851
179514 [질문] 무협 웹소설이나 웹툰 추천 부탁드려요 [5] 더쿤더5004 25/01/31 5004
179513 [삭제예정] 먼저 연락이 안오면 무조건 가능성 없나요? [26] 삭제됨6110 25/01/31 6110
179512 [질문] 갤럭시 s25 플러스 와 울트라 고민. ( 사용목적 명확함) [10] 계란말이매니아5527 25/01/31 5527
179511 [질문] 애플 생태계로 스마트홈 구성 질문드립니다 [5] 호비브라운4244 25/01/31 4244
179510 [질문] 5080 그래픽으로 견적 부탁 드립니다. [9] 자가타이칸4814 25/01/30 4814
179509 [질문] 맥북 프로에 올리브유가 들어갔습니다 [1] Fig.15744 25/01/30 5744
179508 [질문] 이민 가신 분들은 명절 차례 지내시나요? [7] 깃털달린뱀4883 25/01/30 4883
179507 [질문] 빠른 생일인 분들에게만 질문이 있습니다. [26] 한이연5022 25/01/30 5022
179506 [질문] 상체를 크게 움직이면 복부통증이 있는데 [3] 교대가즈아4943 25/01/30 4943
목록 이전 다음
댓글

+ : 최근 1시간내에 달린 댓글
+ : 최근 2시간내에 달린 댓글
맨 위로