[Jquery]로 특정 위치 태그에서 텍스트 가져오는 방법

jQuery로 특정 위치 태그에서 텍스트 가져오는 방법

안녕하세요, 개발자 여러분! 이번 포스팅에서는 jQuery를 사용해 원하는 위치의 태그에서 텍스트를 가져오는 방법을 알아보겠습니다. 테이블 안의 특정 셀이나 리스트의 특정 항목 등, 다양한 상황에서 활용할 수 있으니 잘 살펴보세요!

1. 기본 텍스트 가져오기

jQuery에서는 text() 또는 html() 메소드를 사용해 태그의 내용을 가져올 수 있습니다.

• text(): 순수 텍스트만 가져옴

let text = $("#myElement").text();

• html(): HTML 태그를 포함한 내용 가져옴

let html = $("#myElement").html();

2. 특정 위치에서 텍스트 가져오기

특정 위치의 태그를 선택하려면 jQuery의 선택자나 인덱스를 활용하면 됩니다.

(1) 클래스 또는 ID로 선택

// ID가 'target'인 요소의 텍스트 가져오기
let textById = $("#target").text();

// 클래스가 'item'인 요소의 텍스트 가져오기
let textByClass = $(".item").text();

(2) 인덱스로 특정 위치 선택

여러 개의 요소 중 특정 순서에 있는 태그를 선택할 때 유용합니다.

// 클래스가 'item'인 요소 중 두 번째 요소의 텍스트 가져오기
let secondItem = $(".item").eq(1).text(); // 인덱스는 0부터 시작

(3) 테이블에서 특정 셀의 텍스트 가져오기

예를 들어, 테이블의 두 번째 행, 첫 번째 열의 텍스트를 가져오고 싶다면:

let cellText = $("#myTable tr").eq(1).find("td").eq(0).text();

3. 실습 예제

아래는 실습 가능한 예제 코드입니다. 버튼을 누르면 특정 위치의 텍스트를 가져와 콘솔에 출력합니다.

행 1, 열 1	행 1, 열 2
행 2, 열 1	행 2, 열 2

텍스트 가져오기
    $("#getText").click(function() {
        // 두 번째 행, 첫 번째 열의 텍스트 가져오기
        let text = $("#myTable tr").eq(1).find("td").eq(0).text();
        console.log("가져온 텍스트: " + text); // "행 2, 열 1" 출력
    });

4. 추가 팁

• 공백 제거: 텍스트에 불필요한 공백이 포함될 수 있으니 $.trim()을 사용하세요.

let cleanText = $.trim($("#myElement").text());

• 요소가 없는 경우 체크: 요소가 존재하는지 확인하면 안전합니다.

if ($("#myElement").length > 0) {
    let text = $("#myElement").text();
}

마무리

jQuery로 특정 위치의 태그에서 텍스트를 가져오는 건 선택자와 메소드를 잘 활용하면 간단합니다. 위 예제를 참고해서 여러분의 프로젝트에 적용해보세요! 질문이 있으면 언제든 댓글 남겨주세요~