Jquery id 여러개 찾기 - Jquery id yeoleogae chajgi

아래처럼 같은 name으로 여러개 값이 있을 경우, 

이 값들을 배열에 담는 방법이 있다

먼저 다음 예제처럼 가져올 값들이 있다고 가정하면

<input type="hidden" name="groupod" value="1">
<input type="hidden" name="groupod" value="2">
<input type="hidden" name="groupod" value="3">

<input type="button" id="commentbtn" value="배열만들기"/></td>

자바스크립트 

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.0.js"></script>
<script type="text/javascript">

$(function(){

	$('#commentbtn').on('click', function(){
    	//값들의 갯수 -> 배열 길이를 지정
		var grpl = $("input[name=groupod]").length;
		//배열 생성
		var grparr = new Array(grpl);
		//배열에 값 주입
		for(var i=0; i<grpl; i++){                          
			grparr[i] = $("input[name=groupod]").eq(i).val();
	        alert(grparr[i]);
	    }
	});
});
</script>

이렇게 배열에 담을 수 있다

보통 이름이 있을 때

$('select[id=""]').val("${defaultListRowCnt}");

뭐 이런식으로 사용하는데 

동적으로 생성되서 id나 name값이 여러개일때 

Like검색처럼 id값을 찾을 수 있다.

^이걸 사용하는 경우 rowPerPage로 시작하는 id를 찾는것이고

$를 사용하는 경우 rowPerPage로 끝나는 id를 찾는것이다.

$('select[id^="rowPerPage"]').val("${defaultListRowCnt}");

$('select[id$="rowPerPage"]').val("${defaultListRowCnt}");

이렇게 ! 

jQuery에는 다양한 셀렉터들이 있다.

이걸 잘 사용하면 쉽게 jQeury 코딩이 가능하다 (Javascript도 사용가능)

이번 포스팅에서는 간단하게 예시로만 설명할것이다.

자세한 내용은 다음 파일을 받아서 보도록 하자

Jquery id 여러개 찾기 - Jquery id yeoleogae chajgi
SELECTOR.zip

(파일은 압축을 풀면 SELECTOR 폴더안에 index.html만 키면 모든 내용을 확인할 수 있다)

지금 부터 내가 설명하고자 하는 다중 셀렉터와 해당 속성의 값이 주어진 값으로 시작되면 선택 된다는 ^기호를 사용하는 것을 보여주고자 한다.

만약 다음과 같이 체크박스가 4개가 있다.

<input type="checkbox" name="postData" id="Name1" class="CheckBox">
<input type="checkbox" name="postData" id="Phone1" class="CheckBox">

<input type="checkbox" name="postData" id="Name2" class="CheckBox">
<input type="checkbox" name="postData" id="Phone2" class="CheckBox">

<input type="checkbox" name="postData" id="Name3" class="CheckBoxOther">
<input type="checkbox" name="postData" id="Phone3" class="CheckBoxOther">

이 중에 1) Class가 CheckBox이며,

           2) id가 Name이라는 문자열로 시작하는 input 박스를 체크하기를 원한다.

그렇다면, Jqeury 소스는 다음과 같아진다.

$('input[id^="Name"][class="CheckBox"]').attr('checked', true); 

    Name으로 시작하는 id     CheckBox가 class   

: 두 조건을 모두 만족하는 input tag (다중 셀렉터) 

하면 

<input type="checkbox" name="postData" id="Name1" class="CheckBox">
<input type="checkbox" name="postData" id="Name2" class="CheckBox">

만 체크가 된다.


$("[선택자], [선택자], [선택자]").EventMethod();

어떠한 선택자들이 같은 이벤트의 함수를 실행한다고 한다면
위와 같이 선택자를 여러개 묶어 같이 실행할 수 있습니다.

예를 들어 
클래스명이 다른 슬라이드가 있는데 
이것을 같은 슬라이드 플러그인 이벤트로 묶고 싶다거나
datepicker 와 같이 달력 기능이 있는 부분을 한번에 묶고 싶다면 사용할 수 있겠습니다.

아래 예시를 보면 어떻게 작성하는지 더 쉽게 이해하실 수 있을 것 같네요.

예를 들어 클릭 이벤트를 여러개의 선택자로 묶고 싶다면 아래와 같이 작성하면 되겠습니다.

$(".box01, .box02, #box01, #box02, div, p").click(function(){
	//.......
})

선택자로는 클래스명, 아이디명, 태그명으로 작성하여 선택할 수 있습니다.

T없이맑은날

jquery

jquery 선택자 여러개, 요소 여러개 선택하기

T없이맑은I 2013. 9. 9. 22:42

$(function(){

$("#e_sdate, #e_edate, #e_date_dang, .class, #id, input, span").datepicker({

   showOtherMonths: true,

   selectOtherMonths: true,

});

});

컴마로 구분해줘서 사용하면 된다.

티스토리 뷰

보통 이름이 있을 때 

$('select[id=""]').val("${defaultListRowCnt}");

뭐 이런식으로 사용하는데 

동적으로 생성되서 id나 name값이 여러개일때 

Like검색처럼 id값을 찾을 수 있다.

^이걸 사용하는 경우 rowPerPage로 시작하는 id를 찾는것이고

$를 사용하는 경우 rowPerPage로 끝나는 id를 찾는것이다.

$('select[id^="rowPerPage"]').val("${defaultListRowCnt}");

cs


$('select[id$="rowPerPage"]').val("${defaultListRowCnt}");

cs

이렇게 !