본문 바로가기
IT/web

[javascript] jquery multiple select 예제와 소스코드 공유

by 어느해겨울 2021. 12. 26.

 

 jquery multiple select

 

jquery를 사용할 때 가장 많이 사용하는 기능은 아마 event bind(e.g. click, change..)와 selector 가 아닐까 싶다.

특히 다중의 attribute를 선택할 때 빈번하게 사용하는 기능의 샘플을 정리해본다.

 

<html>
	<div name="div_test_box_1">name_1</div>
	<div name="div_test_box_2">name_2</div>
	<div name="div_test_box_3">name_3</div>

	<div id="div_test_box_1">id_1</div>
    
    <div class="div_test_box">class_1</div>
</html>

<script>
	// id attribute를 선택할 때
	var arr_div_info = $("#div_test_box_1").attr("id").split("_");
	var div_idx = arr_div_info[arr_div_info.length - 1]; 
	console.log(div_idx);	// 1
    
	// class attribute를 선택할 떄
	var str_html = $(".div_test_box").html();
	console.logs(str_html);	// class_1
    
	// 다중 name attribute를 선택할 때
	$("[name^=div_test_box_]").each(function(_idx, _item) {
		console.log($(_item).html());	// name_1, name_2, name_3
	});
</script>

 

selector는 id(#)와 class(.)를 키워드로 지정할 수 있고 그 외의 태그에는 name을 사용하면 된다.

더욱 자세한 설명은 jquery api 문서를 참고하면 도움이 된다.

 

https://api.jquery.com/category/selectors/

 

Selectors | jQuery API Documentation

Select all elements that are in the progress of an animation at the time the selector is run. Selects elements that have the specified attribute with a value either equal to a given string or starting with that string followed by a hyphen (-). Selects elem

api.jquery.com

 

 

댓글