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지 몇장 분량으로 설명 쭉 쓰면 사이트 하나 뚝딱되겠어요
목록 삭게로! 맨위로
번호 제목 이름 날짜 조회
176787 [질문] 아파트 매매 지역 선택이 고민입니다. [63] 브레드포르7990 24/06/24 7990
176786 [질문] S24+ 자급제 어디서 사는게 좋을까요? [4] 아이언맨6986 24/06/24 6986
176785 [질문] 공주 같은 느낌의 장점을 가진 관광 도시가 또 있을까요?? [31] 원스7839 24/06/23 7839
176784 [질문] 태블릿 구매 질문입니다. [5] 하위1%6485 24/06/23 6485
176783 [질문] 일본 노래 하나 찾아주세요 큐브님6005 24/06/23 6005
176782 [질문] 이직 이력서 작성 시 재직기간 오류에 대한 정정 [8] 곰돌이푸 6372 24/06/23 6372
176781 [질문] 오디오북 들을만 한가요?? [12] 체크카드5322 24/06/23 5322
176780 [질문] 인터넷 재계약 질문입니다. [5] 마제스티5396 24/06/23 5396
176779 [질문] 스페인어 발음 질문입니다 [2] 샨티5360 24/06/23 5360
176778 [질문] 웹에 들어갔더니 문구가 자동복사 되었습니다(안드로이드폰) DogSound-_-*5287 24/06/23 5287
176777 [질문] Wow 와우 복귀 유저 몇 가지 질문 드립니다 [8] 일신7044 24/06/23 7044
176776 [질문] 디아4 재밌나요? [15] Fake6487 24/06/23 6487
176774 [질문] mcafee 이거 1년에 16000원씩 내면서 쓸만할까요? [3] wersdfhr8228 24/06/22 8228
176773 [질문] 혹시.. 외장SSD 구입하실분 계실까요? [14] Croove10290 24/06/22 10290
176772 [질문] 자동차 대물 사고 관련 질문드립니다. [7] 그냥가끔8395 24/06/22 8395
176768 [질문] 진석사님은 요즘? [6] 학교를 계속 짓자8450 24/06/21 8450
176767 [질문] 독거 노인에게 남는 방은 어떤 용도가 가능할까요? [12] 카이넨샤말7700 24/06/21 7700
176766 [질문] 매장에 놓고 쓸 에어매트 추천부탁드립니다. [14] 행복을 찾아서7329 24/06/21 7329
176765 [질문] 엔카 중고차 '엔카믿고', '픽플러스' 차량은 믿을만할까요? [5] 사람되고싶다7556 24/06/21 7556
176764 [질문] 키안띠클라시코 와인중에 한국 미수입 와인이 어떤게 있나요 [9] 옥동이5777 24/06/21 5777
176763 [질문] 차량 기변 고민입니다 [32] 월터화이트8607 24/06/21 8607
176762 [질문] 언제쯤 AI번역이 자연스러워질까요 [14] 김경호6453 24/06/21 6453
176761 [질문] 범죄사건에서 용의자가 서로 상대가 했다고 주장하면 어떻게 되나요? [16] 붕붕붕6119 24/06/21 6119
목록 이전 다음
댓글

+ : 최근 1시간내에 달린 댓글
+ : 최근 2시간내에 달린 댓글
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기