[JQUERY] 어떻게 jQuery로 이름 요소를 선택할 수 있습니다?
JQUERY어떻게 jQuery로 이름 요소를 선택할 수 있습니다?
해결법
-
1.당신은 jQuery를 속성 선택기를 사용할 수 있습니다 :
당신은 jQuery를 속성 선택기를 사용할 수 있습니다 :
$('td[name ="tcol1"]') // matches exactly 'tcol1' $('td[name^="tcol"]' ) // matches those that begin with 'tcol' $('td[name$="tcol"]' ) // matches those that end with 'tcol' $('td[name*="tcol"]' ) // matches those that contain 'tcol'
-
2.상관 특성 [ATTRIBUTE_NAME = 값]의 방법을 사용하여 선택 될 수있다. 여기에 샘플을 참조하십시오 :
상관 특성 [ATTRIBUTE_NAME = 값]의 방법을 사용하여 선택 될 수있다. 여기에 샘플을 참조하십시오 :
var value = $("[name='nameofobject']");
-
3.당신이 뭔가를하는 경우 :
당신이 뭔가를하는 경우 :
<input type="checkbox" name="mycheckbox" value="11" checked=""> <input type="checkbox" name="mycheckbox" value="12">
이 같은 모든를 읽을 수 있습니다 :
jQuery("input[name='mycheckbox']").each(function() { console.log( this.value + ":" + this.checked ); });
코드 조각 :
jQuery를 ( "입력 [NAME = 'mycheckbox']"). 각 (함수 () { 을 console.log (this.value + ":"+ this.checked); }); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> script>
-
4.당신은 이름으로 옛날 방식을 요소의 배열을 얻을 jQuery를 해당 배열을 전달 할 수있다.
당신은 이름으로 옛날 방식을 요소의 배열을 얻을 jQuery를 해당 배열을 전달 할 수있다.
toggleByName 함수 () { VAR arrChkBox는 document.getElementsByName ( "chName을") =; $ (arrChkBox) .toggle (); } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> script>
샌드 TITLE> head>
body> HTML>주 : 유일한 시간 당신은 체크 박스 또는 라디오 입력에 대해이어야한다 "name"속성을 사용하는 이유가있는 것입니다.
또는 당신은 선택을위한 요소에 다른 클래스를 추가 할 수 있습니다. (이 내가 할 것 인 것이다)
함수 toggleByClass (bolShow) { 경우 (bolShow) { $ ( "rowToToggle.") 표시 ().; } 다른 { $ ( ". rowToToggle") 숨기기 ().; } } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> script>
샌드 TITLE> head> <표>DATA1 TD> DATA2 TD> TR> DATA1 TD> DATA2 TD> TR> DATA1 TD> DATA2 TD> TR> 테이블> body> HTML> 5.다음과 같은 방법으로 jQuery를에 이름 요소를 사용하여 입력 필드에서 이름 값을 얻을 수 있습니다 :
다음과 같은 방법으로 jQuery를에 이름 요소를 사용하여 입력 필드에서 이름 값을 얻을 수 있습니다 :
VAR FIRSTNAME = jQuery를 ( "# form1에 입력 [NAME = FIRSTNAME]") 발 ().; // 반환 ABCD VAR LASTNAME = jQuery를 ( "# form1에 입력 [NAME = LASTNAME]") 발 ().; // 반환 XYZ CONSOLE.LOG (FIRSTNAME); CONSOLE.LOG (LASTNAME); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> script>
6.프레임 워크는 일반적으로 같은 형태의 브래킷 이름을 사용 :
프레임 워크는 일반적으로 같은 형태의 브래킷 이름을 사용 :
<input name=user[first_name] />
그들은 액세스 할 수 있습니다 :
// in JS: this.querySelectorAll('[name="user[first_name]"]') // in jQuery: $('[name="user[first_name]"]') // or by mask with escaped quotes: this.querySelectorAll("[name*=\"[first_name]\"]")
7.나는이 같은 짓을했는지 그것은 작동합니다 :
나는이 같은 짓을했는지 그것은 작동합니다 :
$('[name="tcol1"]')
https://api.jquery.com/attribute-equals-selector/
8.당신은 허용 대답이 부정확하게 인용의 두 번째 세트를 잊었 :
당신은 허용 대답이 부정확하게 인용의 두 번째 세트를 잊었 :
$('td[name="tcol1"]')
9.여기서 간단한 해결책이다 : $ ( 'TD [NAME = tcol1])
여기서 간단한 해결책이다 : $ ( 'TD [NAME = tcol1])
10.이 같은 자사의 ID 속성을 사용하여 JQuery와의 요소를 얻을 수 있습니다 :
이 같은 자사의 ID 속성을 사용하여 JQuery와의 요소를 얻을 수 있습니다 :
$("#tcol1").hide();
11.당신은 [속성 _ = 값]을 선택 같은 속성을 사용할 수 있습니다.
당신은 [속성 _ = 값]을 선택 같은 속성을 사용할 수 있습니다.
$('td[name=tcol1]').hide();
12.개인적으로, 내가 과거에했던 것은 그들에게 공통의 클래스 ID를 부여하고이를 선택하는 데 사용됩니다. 그들은 클래스가 존재하지 않을 수 있습니다 지정한 가지고 그것은 이상을하지 않을 수 있지만 선택 훨씬 쉽게의 지옥을 만든다. 그냥 당신이 당신의 클래스 이름에 독특한있어합니다.
개인적으로, 내가 과거에했던 것은 그들에게 공통의 클래스 ID를 부여하고이를 선택하는 데 사용됩니다. 그들은 클래스가 존재하지 않을 수 있습니다 지정한 가지고 그것은 이상을하지 않을 수 있지만 선택 훨씬 쉽게의 지옥을 만든다. 그냥 당신이 당신의 클래스 이름에 독특한있어합니다.
즉, 내가 클래스 선택을 사용하십시오 위의 예를 들어. 당신이 jQuery를 결과에 어떤 실수 흠을하지 않도록 더 나은 여전히 'tcol1'굵게에서 클래스 이름을 변경하는 것입니다. 굵은 실제로 CSS 클래스를 참조 않는 경우, 당신은 항상 클래스 속성에 모두를 지정할 수 있습니다 - 즉 '클래스 = "tcol1 굵은' '.
요약하면, 당신은 이름에 의해 선택 중 하나 복잡의 jQuery 셀렉터를 사용하고 관련 성능 저하를 그대로 사용하거나 클래스 선택기를 사용할 수없는 경우.
당신은 항상 테이블 이름을 포함하여 jQuery를 범위를 제한 할 수 있습니다 즉, $ ( '# TABLEID> .bold를')
즉, "세계"를 검색에서 jQuery를 제한해야합니다.
그 여전히 복잡한 선택으로 분류 될 수 있지만, 이렇게 빨리 최소한으로 처리를 계속, '#tableID'의 ID와 테이블 내에서 모든 검색을 제한합니다.
당신은 #의 표에서 1 개 이상의 요소를 찾고 있다면 이것의 대안 범위를 별도로를 검색하고이 한계로 jQuery를에 전달 할 수 있지만 때마다 그것을보고 처리하는 비트를 저장한다.
var tbl = $('#tableID'); var boldElements = $('.bold',tbl); var rows = $('tr',tbl); if (rows.length) { var row1 = rows[0]; var firstRowCells = $('td',row1); }
13.오늘 (2020년 6월 16일) 내가 크롬 83.0에 맥 OS 높은 시에라에 선택한 솔루션 테스트를 수행, 사파리 13.1.1와 파이어 폭스 77.0.
오늘 (2020년 6월 16일) 내가 크롬 83.0에 맥 OS 높은 시에라에 선택한 솔루션 테스트를 수행, 사파리 13.1.1와 파이어 폭스 77.0.
이름으로 요소를 가져옵니다
이름으로 행을 얻고 숨길 (우리는 기본 솔루션을 미리 계산 배제합니다 (I) - 이론적으로 가장 빠른) 비교에서 - 그것은 참고 자료로 사용됩니다)
I는 이름 (A, B, C, D)을 판독 요소 개의 테스트를 수행하고 그 감추기 요소 (E, F, G, H, I)
코드 조각 선물 사용하는 코드 아래에
//https://stackoverflow.com/questions/1107220/how-can-i-select-an-element-by-name-with-jquery# // https://jsbench.me/o6kbhyyvib/1 // https://jsbench.me/2fkbi9rirv/1 함수 A () { 창 $ ( '[NAME = tcol1]); } 함수 B () { 반환 $ (document.getElementsByName ( "tcol1")) } 함수 C () { 반환 document.getElementsByName ( "tcol1") } 함수 D () { 창 document.querySelectorAll ( '[NAME = tcol1]) } 함수 E () { $ ( '[NAME = tcol1]) 감추기 ().; } 함수 F () { $ (document.getElementsByName ( "tcol1")) 숨기기 ().; } 함수 G () { document.getElementsByName ( "tcol1") 대해 forEach (E => e.style.display = '없음.'); } 함수 H () { document.querySelectorAll ( '[NAME = tcol1]) 대해 forEach (E => e.style.display ='없음. '); } 함수 I () { 하자 elArr = ... document.getElementsByName ( "tcol1을")]; 길이 = elArr.length하자 대해 (ⅰ = 0하자 나는 <길이; I ++) elArr [I] .style.display = '없음'; } // ----------- // 테스트 // ----------- 리셋 기능 () {$ ( 'TD [NAME = tcol1]) 표시 ().; } [A, B, C, D] .forEach (F => CONSOLE.LOG ( '$ {} f.name 행 $ {. F ()의 길이}')); <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"> script>
이 조각에만 선물을 사용하는 코드 DIV> <표>DATA1 TD> DATA2 TD> TR> DATA1 TD> DATA2 TD> TR> DATA1 TD> DATA2 TD> TR> 테이블> <버튼의 onclick = "E ()"> E : 감추기 버튼> <버튼의 onclick = "F ()"> F : 숨기기 버튼> <버튼의 onclick = "G ()"> G : 숨기기 버튼> <버튼의 onclick = "H ()"> H : 숨기기 버튼> <버튼의 onclick = "나는 ()"> I : 숨기기 버튼>로
<버튼의 onclick = "초기화 ()"> 리셋 버튼>크롬의 예제 결과
14.당신은 기능을 사용할 수 있습니다 :
당신은 기능을 사용할 수 있습니다 :
get.elementbyId();
from https://stackoverflow.com/questions/1107220/how-can-i-select-an-element-by-name-with-jquery by cc-by-sa and MIT license
'JQUERY' 카테고리의 다른 글
[JQUERY] JQuery와 아약스 웹 서비스에 JSON을 게시 (0) 2020.09.29 [JQUERY] 나는 양식을 제출하지 않는 <버튼>을 만들 수 있습니까? (0) 2020.09.29 [JQUERY] 어떻게 제대로 약속 체인의 탈옥? (0) 2020.09.29 [JQUERY] 브라우저 가까운 이벤트를 감지하는 시도 (0) 2020.09.29 [JQUERY] 는 X-요청-으로 헤더의 점은 무엇입니까? (0) 2020.09.29