인프런 커뮤니티 질문&답변

$("td").each(함수) 명령은 웹브라우저화면에서 td태그들을 찾아서 한개씩 가져와서 함수를 실행해주는 명령입니다.

each 안에서  $(this) 는 반복문안에서 가져온 컨텐츠를 의미합니다.

<td>정적언어</td> 를 가져왔다고 한다면

$(this)는 <td>정적언어</td> 태그 를 의미합니다.

html() 명령은 가져온 태그의 내용을 의미합니다.

그래서 

const original_content = $(this).html();

original_content 라는 변수를 만들고 

그안에 $(this).html() 을 저장합니다.

$(this) 는 반복문안에서 가져온 내용. 즉 각 td 들을 의미합니다.

따라서 $(this) 는 <td>정적언어</td> 와 같은 td 태그 들이 되고요.

$(this).html() 은 그 태그 안의 내용을 의미합니다.

따라서  $(this).html()  은 '정적언어' 가 되겠죠.

정리하자면

const original_content = $(this).html();

은 

original_content  에 '정적언어' 라는 문자열을 저장하게 됩니다.

두번째

html("~~~~") 명령어는 선택된 태그의 내용을 변경하는 명령입니다.

$(this).html("aaa") 라고 실행한다면

각 태그의 내용은 aaa 로 바뀌어서 <td>aaa</td> 가 됩니다.

$(this).html("-" + original_content  + "-");

의 의미는 $(this)의 내용을 "-" + original_content  + "-" 로 변경한다는 것입니다.

$(this) 는 반복문안에서 선택된 태그 이고

original_content 는 이전에 저장된 '정적언어' 와 같은  td 의 내용이니

최종적으로 td태그의 내용이  -정적언어- 로 변경이 됩니다.

$(this)에서 가리키는 td태그와 html() 명령에서 가져온 태그의 내용 사이의 차이점이 뭔지 이해가 잘 안갔었는데 이제 이해가 갑니다! 설명 감사합니다!! :D