vanilla JS로 siblings 구현하기

jQuery의 메소드 중 하나인 siblings()는 선택한 자신 요소를 제외한 형제 요소들을 모두 고르는 메소드다. 이를 바닐라 자바스크립트로 구현하려면 filter() 를 사용해 비교적 간단하게 구현할 수 있다. 예제코드 HTML one two three jQuery $(".one").siblings(); JavaScript const siblings = (el) => [...el.parentElement.children].filter(node => node != el); const one = document.querySelector('.one'); console.log(siblings(one)); // 함수에 엘리먼트를 넣으면 그 엘리먼트의 형제 요소들을 배열로 반환한다. // > (2) [li.t..

2023.02.13

input 글자수 입력 후 다음 칸에 focus

input maxlength 값 만큼 입력 후 다음 input에 자동으로 focusing 된다. 카드번호 입력, 비밀번호 1글자씩 입력 등에 사용된다. 카드번호 취소 취소 취소 취소 유효기간 취소 $(".section__joincard .form__item-input.flex input").keyup (function () { var charLimit = $(this).attr("maxlength"); if (this.value.length >= charLimit) { $(this).parent().next().find('input').focus(); return false; } });

2022.12.23

모바일 디바이스 체크

모바일 디바이스를 체크하여 PC웹 환경인지, mobile 환경인지 알아낼 수 있다. 이 코드를 활용해 모바일용, 또는 PC화면용 동작을 다르게 할 수 있다. function detectMobileDevice(agent) { const mobileRegex = [/Android/i, /iPhone/i, /iPad/i, /iPod/i, /BlackBerry/i, /Windows Phone/i] return mobileRegex.some(mobile => agent.match(mobile)) } const isMobile = detectMobileDevice(window.navigator.userAgent) if(isMobile){ // 모바일 } else { // PC }

2022.12.12

async await promise

function sayHi(){ console.log("start"); } async function a(){ let promise = new Promise((resolve, reject) => { setTimeout(() => resolve(sayHi()), 3000) }); let result = await promise; console.log("end"); } a(); a함수를 실행하면 3초 뒤 sayHi가 실행 되고, 그 아랫줄이 순차적으로 실행된다. console창에 start가 먼저 찍히고, end가 나중에 찍힘

2022.09.30

아이폰 카메라, 공유하기 버튼

카메라 🎥 비디오 스트림에 액세스할 수 없습니다. (웹캠이 활성화되어 있는지 확인하십시오). 잘못된 QR코드입니다. Data: // var video = document.createElement("video"); var video = document.getElementById("video"); // $("#wrap").append(video); // console.log('1', video); var canvasElement = document.getElementById("canvas"); var canvas = canvasElement.getContext("2d"); var loadingMessage = document.getElementById("loadingMessage"); var outputCo..

2022.09.29

수수료 포함한 금액 계산법 /1.1

// 수수료 포함한 금액 계산 const cal_money = function(total_pin){ let ret_money = 0; let fee = ( $refund_fee_max * 0.01 ) + 1; /// 10.00 x 0.01 +1 => 1.1 let temp_money = total_pin / fee; ret_money = Math.floor( temp_money / 100) * 100; return ret_money; }

2022.07.21