jQuery를 사용하여 이름으로 요소를 선택하려면 어떻게 해야 합니까?
테이블 컬럼을 확장해서 숨기려고 합니다.jQuery는 이 명령어를<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'
임의의 Atribute는 다음 방법으로 선택할 수 있습니다.[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>주의: "name" 속성을 사용해야 하는 이유는 체크박스 또는 무선 입력뿐입니다.
또는 선택할 요소에 다른 클래스를 추가할 수도 있습니다.(나는 이렇게 할 거야)
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의 이름 요소를 사용하여 입력 필드에서 이름 값을 얻을 수 있습니다.
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]\"]")
이렇게 해봤는데 효과가 있어요.
$('[name="tcol1"]')
https://api.jquery.com/attribute-equals-selector/
두 번째 따옴표를 잊어버렸기 때문에 승인된 답변이 올바르지 않습니다.
$('td[name="tcol1"]')
간단한 해결책은 다음과 같습니다.$('td[name=tcol1]')
임의의 Atribute를 Selector로 사용할 수 있습니다.[attribute_name=value].
$('td[name=tcol1]').hide();
성능
오늘(2020.06.16) Chrome 83.0, Safari 13.1.1 및 Firefox 77.0의 MacOS High Sierra에서 선택한 솔루션에 대한 테스트를 수행합니다.
결론들
이름별로 요소 가져오기
getElementByName(C)는 크고 작은 어레이를 위한 모든 브라우저에서 가장 빠른 솔루션입니다.그러나 저는 부하가 느린 솔루션일 가능성이 높거나 내부 브라우저 해시 캐시를 이름과 요소의 쌍으로 사용합니다.- 혼합 js-jquery 솔루션(B)이 더 빠릅니다.
querySelectorAll(D) 솔루션 - 순수 jquery 용액(A)이 가장 느리다
이름별로 행을 가져와 숨깁니다(사전 계산된 네이티브 솔루션(I)은 비교 대상에서 제외됩니다(이론적으로 가장 빠릅니다). 참조로 사용됩니다).
- 놀랍게도 혼합 js-jquery 솔루션(F)은 모든 브라우저에서 가장 빠릅니다.
- 예상외로 큰 테이블의 jquery(E,F) 솔루션보다 사전 계산된 솔루션(I)이 느리다(!!!) - .hide() jQuery 메서드 세트 스타일을 확인합니다.
"default:none"숨겨진 요소 - 하지만 더 빠른 방법을 찾는 것 같습니다.element.style.display='none' - 큰 테이블에서는 jquery(E) 솔루션이 매우 빠릅니다.
- jquery(E) 및 querySelectorAll(H) 솔루션은 작은 테이블이 가장 느리다.
- getElementByName(G) 및 querySelectorAll(H) 솔루션이 큰 테이블에 비해 매우 느리다.
세부 사항
읽기 요소에 대해 이름(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 결과 예시
개인적으로 과거에 제가 한 일은 공통의 클래스 ID를 주고 그것을 사용하여 선택한 것입니다.존재하지 않을 수 있는 클래스가 지정되어 있기 때문에 이상적이지 않을 수도 있지만, 이 때문에 선택이 훨씬 쉬워집니다.네 반 이름에서 네가 특별하다는 것만 확실히 해.
즉, 위의 예에서는 수업별로 선택한 내용을 사용합니다.jQuery 결과에 실수로 포함되지 않도록 클래스 이름을 굵은 글씨에서 'tcol1'로 변경하는 것이 좋습니다.굵은 글씨가 실제로 CSS 클래스를 참조하는 경우 클래스 속성에서 항상 두 가지 모두 지정할 수 있습니다(예: 'class="tcol1 bold").
요약하면 이름별로 선택할 수 없는 경우 복잡한 jQuery 선택기를 사용하여 관련된 성능 적중을 허용하거나 클래스 선택기를 사용하십시오.
테이블 이름($('#table)을 포함하면 jQuery 범위를 언제든지 제한할 수 있습니다.ID > .bold')
그러면 jQuery가 "월드"를 검색하지 못하게 됩니다.
여전히 복잡한 셀렉터로 분류될 수 있지만 검색은 '#table'의 ID를 가진 테이블 내에서 빠르게 제한됩니다.ID'는 처리를 최소한으로 유지합니다.
#table1에서 여러 요소를 찾고 있는 경우 이를 별도로 검색한 후 jQuery에 전달하면 범위가 제한되지만 매번 검색해야 하는 처리량이 다소 줄어듭니다.
var tbl = $('#tableID');
var boldElements = $('.bold',tbl);
var rows = $('tr',tbl);
if (rows.length) {
var row1 = rows[0];
var firstRowCells = $('td',row1);
}
다음과 같은 ID 속성을 사용하여 JQuery의 요소를 가져올 수 있습니다.
$("#tcol1").hide();
다음 기능을 사용할 수 있습니다.
get.elementbyId();
언급URL : https://stackoverflow.com/questions/1107220/how-can-i-select-an-element-by-name-with-jquery
'programing' 카테고리의 다른 글
| 최상위 레벨에서 비동기/대기 기능을 사용하려면 어떻게 해야 합니까? (0) | 2023.01.23 |
|---|---|
| ID 필드별로 Vuex에 저장된 개체 배열에서 항목을 가져오려면 어떻게 해야 합니까? (0) | 2023.01.23 |
| JavaScript에서 문자열 배열을 대소문자를 구분하지 않고 정렬하려면 어떻게 해야 합니까? (0) | 2023.01.23 |
| Vue.js와 Flask를 결합하려면 어떻게 해야 하나요? (0) | 2023.01.23 |
| Python에서 여러 줄의 코멘트를 작성하려면 어떻게 해야 하나요? (0) | 2023.01.13 |