질문자 :T.T.T.
확장하고 숨기려는 테이블 열이 있습니다. <td> 요소를 class 별로 선택하지만 요소의 name 선택하지 않을 때 숨기는 것 같습니다.
예를 들어:
$(".bold").hide(); // Selecting by class works. $("tcol1").hide(); // Selecting by name does not work. 아래 HTML을 참고하세요. 두 번째 열은 모든 행에 대해 name name 속성을 사용하여 이 컬렉션을 어떻게 만들 수 있습니까?
<tr> <td>data1</td> <td name="tcol1" class="bold"> data2</td> </tr> <tr> <td>data1</td> <td name="tcol1" class="bold"> data2</td> </tr> <tr> <td>data1</td> <td name="tcol1" class="bold"> data2</td> </tr>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'[attribute_name=value] 방식을 사용하여 모든 속성을 선택할 수 있습니다. 여기 에서 샘플을 참조하십시오.
var value = $("[name='nameofobject']");다음과 같은 것이 있는 경우:
<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("input[name='mycheckbox']").each(function() { console.log( this.value + ":" + this.checked ); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" name="mycheckbox" value="11" checked=""> <input type="checkbox" name="mycheckbox" value="12">이름으로 요소 배열을 구식 방식으로 가져와 해당 배열을 jQuery에 전달할 수 있습니다.
function toggleByName() { var arrChkBox = document.getElementsByName("chName"); $(arrChkBox).toggle(); } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <head> <title>sandBox</title> </head> <body> <input type="radio" name="chName"/><br /> <input type="radio" name="chName"/><br /> <input type="radio" name="chName"/><br /> <input type="radio" name="chName"/><br /> <input type="button" onclick="toggleByName();" value="toggle"/> </body> </html>참고: "이름" 속성을 사용해야 하는 유일한 경우는 체크박스 또는 라디오 입력용이어야 합니다.
또는 선택을 위해 요소에 다른 클래스를 추가할 수 있습니다.(이것이 내가 할 일입니다)
function toggleByClass(bolShow) { if (bolShow) { $(".rowToToggle").show(); } else { $(".rowToToggle").hide(); } } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <head> <title>sandBox</title> </head> <body> <table> <tr> <td>data1</td> <td class="bold rowToToggle">data2</td> </tr> <tr> <td>data1</td> <td class="bold rowToToggle">data2</td> </tr> <tr> <td>data1</td> <td class="bold rowToToggle">data2</td> </tr> </table> <input type="button" onclick="toggleByClass(true);" value="show"/> <input type="button" onclick="toggleByClass(false);" value="hide"/> </body> </html>다음과 같이 jQuery의 name 요소를 사용하여 입력 필드에서 이름 값을 가져올 수 있습니다.
var firstname = jQuery("#form1 input[name=firstname]").val(); //Returns ABCD var lastname = jQuery("#form1 input[name=lastname]").val(); //Returns XYZ console.log(firstname); console.log(lastname); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form name="form1" id="form1"> <input type="text" name="firstname" value="ABCD"/> <input type="text" name="lastname" value="XYZ"/> </form>프레임워크는 일반적으로 다음과 같은 형식에서 대괄호 이름을 사용합니다.
<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]\"]")두 번째 따옴표 세트를 잊어버려서 허용된 답변이 잘못되었습니다.
$('td[name="tcol1"]')다음은 간단한 솔루션입니다. $('td[name=tcol1]')
[attribute_name=value] 와 함께 모든 속성을 선택기로 사용할 수 있습니다.
$('td[name=tcol1]').hide();다음과 같이 ID 속성을 사용하여 JQuery에서 요소를 가져올 수 있습니다.
$("#tcol1").hide();개인적으로, 내가 과거에 한 것은 그들에게 공통 클래스 ID를 부여하고 그것을 선택하는 데 사용하는 것입니다. 존재하지 않을 수 있는 지정된 클래스가 있으므로 이상적이지 않을 수 있지만 선택을 훨씬 쉽게 만듭니다. 클래스 이름에서 고유한지 확인하십시오.
즉 위의 예에서는 클래스별로 선택 항목을 사용합니다. 더 나은 방법은 클래스 이름을 굵게에서 'tcol1'으로 변경하여 jQuery 결과에 실수로 포함되지 않도록 하는 것입니다. 굵게 실제로 CSS 클래스를 참조하는 경우 클래스 속성에서 항상 둘 다 지정할 수 있습니다(예: 'class="tcol1 bold"').
요약하면 이름으로 선택할 수 없는 경우 복잡한 jQuery 선택기를 사용하고 관련 성능 히트를 수락하거나 클래스 선택기를 사용하십시오.
테이블 이름(예: $('#tableID > .bold'))을 포함하여 jQuery 범위를 항상 제한할 수 있습니다.
그것은 jQuery가 "세계"를 검색하는 것을 제한해야 합니다.
여전히 복잡한 선택기로 분류될 수 있지만 ID가 '#tableID'인 테이블 내에서 검색을 빠르게 제한하므로 처리를 최소화합니다.
#table1 내에서 둘 이상의 요소를 찾고 있는 경우 이에 대한 대안은 이를 별도로 조회한 다음 jQuery에 전달하는 것입니다. 이렇게 하면 범위가 제한되지만 매번 조회하기 위해 약간의 처리가 절약되기 때문입니다.
var tbl = $('#tableID'); var boldElements = $('.bold',tbl); var rows = $('tr',tbl); if (rows.length) { var row1 = rows[0]; var firstRowCells = $('td',row1); }오늘(2020.06.16) Chrome 83.0, Safari 13.1.1 및 Firefox 77.0의 MacOs High Sierra에서 선택한 솔루션에 대한 테스트를 수행합니다.
이름으로 요소 가져오기
getElementByName (C)은 크고 작은 배열에 대한 모든 브라우저에서 가장 빠른 솔루션입니다. 그러나 저는 일종의 지연 로딩 솔루션이거나 이름-요소 쌍과 함께 일부 내부 브라우저 해시 캐시를 사용합니다.querySelectorAll (D) 솔루션보다 빠릅니다.이름으로 행을 가져오고 숨깁니다(미리 계산된 기본 솔루션(I) - 이론적으로 가장 빠름)을 비교에서 제외 - 참조로 사용됨)
"default:none" element.style.display='none' 보다 더 빠른 방법을 찾습니다. 
이름( 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 function A() { return $('[name=tcol1]'); } function B() { return $(document.getElementsByName("tcol1")) } function C() { return document.getElementsByName("tcol1") } function D() { return document.querySelectorAll('[name=tcol1]') } function E() { $('[name=tcol1]').hide(); } function F() { $(document.getElementsByName("tcol1")).hide(); } function G() { document.getElementsByName("tcol1").forEach(e=>e.style.display='none'); } function H() { document.querySelectorAll('[name=tcol1]').forEach(e=>e.style.display='none'); } function I() { let elArr = [...document.getElementsByName("tcol1")]; let length = elArr.length for(let i=0; i<length; i++) elArr[i].style.display='none'; } // ----------- // TEST // ----------- function reset() { $('td[name=tcol1]').show(); } [A,B,C,D].forEach(f=> console.log(`${f.name} rows: ${f().length}`)) ; <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <div>This snippet only presents used codes</div> <table> <tr> <td>data1</td> <td name="tcol1" class="bold"> data2</td> </tr> <tr> <td>data1</td> <td name="tcol1" class="bold"> data2</td> </tr> <tr> <td>data1</td> <td name="tcol1" class="bold"> data2</td> </tr> </table> <button onclick="E()">E: hide</button> <button onclick="F()">F: hide</button> <button onclick="G()">G: hide</button> <button onclick="H()">H: hide</button> <button onclick="I()">I: hide</button><br> <button onclick="reset()">reset</button>Chrome의 예시 결과
다음 기능을 사용할 수 있습니다.
get.elementbyId();출처 : http:www.stackoverflow.com/questions/1107220/how-can-i-select-an-element-by-name-with-jquery
| sudo 없이 npm 발생 오류를 수정하는 방법 (0) | 2022.07.09 |
|---|---|
| jQuery에 요소가 있는지 확인 [중복] (0) | 2022.07.09 |
| PDF 파일에 대한 적절한 MIME 미디어 유형 (0) | 2022.07.09 |
| Git에서 셸 명령을 실행할 때 사용할 개인 SSH 키를 지정하는 방법은 무엇입니까? (0) | 2022.07.09 |
| type()과 isinstance()의 차이점은 무엇입니까? (0) | 2022.07.09 |