[JQuery] 효율적인 요소 반복 추가, this의 자식 요소 선택, 자식요소에 이벤트 추가

👩‍💻 자바 개발자 양성과정 25일차

1. 효율적인 요소 반복 추가
2. this의 자식요소 선택
3. 자식 요소에 이벤트 추가

---

 

오늘은 원래 휴강인데, 지난주에 코로나때문에 휴강한거 보강을 하게 되었다..ㅎ

---

1️⃣ 효율적인 요소 반복 추가

제이쿼리에서 요소 추가시 +=를 사용해서 문자로 추가하는 방식과 array에 배열을 넣은 다음 붙혀서 추가하는 방식이 있다.

이때는, array를 사용하는게 더 효율적인 방법이라고 한다.

var arr = ''
for (const user of nameList) {
    arr += `<tr id='${user.no}'><td>${user.name}</td><td>${user.age}</td></tr>`
}
$('table > tbody').append(arr);

이거보다

var arr = [];
for (const user of nameList) {
    arr.push(`<tr id='${user.no}'><td>${user.name}</td><td>${user.age}</td></tr>`)
}
$('table > tbody').append(arr.join(''));

위의 방식 array를 사용해서 더 좋은 것이다.

 

---

2️⃣ this의 자식요소 선택 두가지 방법

$('table').on('click', 'tr', function () {
  var name = $(this).children().eq(0).text();
  var email = $(this).children().eq(1).text();
  console.log(name, email);
};

원래 내가 사용하던 방법은 children().eq()로 선택하는 방식이었다.

$('table').on('click', 'tr', function () {
  var name = $('td', this).filter(':nth-child(1)').text();
  var email = $('td', this).filter(':nth-child(2)').text();
  console.log(name, email);
};

선생님께서 사용하신 방법은 fillter() 1개로 위의 기능을 구현하셨다.

$('td', this) 는 this요소의 자식요소 중 'td'를 배열로 가져온다고 한다. (처음 알았음)

 

 

---

3️⃣ 효율적인 자식요소에 이벤트 추가

$('table').on('click', 'tr', function () {
}

.on('click', 'tr', fun...) 에서 tr은 셀렉터다.

table에 이벤트를 등록하는데 table내에 tr(셀렉터)에서 작동되게 하는 것이다. (이벤트 위임의 경우이다)

만약, $('table tr')를 맨앞에 작성하게 되면, table의 tr에 각각 이벤트를 등록하는 것이다.

그래서 각각 이벤트를 등록할 필요없이 셀렉터로 이벤트위임을 이용하면 더 코드를 효율적으로 짤수 있다.

 

.on() | jQuery API Documentation