jQuery를 사용하여 이름으로 요소를 선택하려면 어떻게해야합니까?

1226

확장하고 숨기려고하는 테이블 열이 있습니다.

jQuery는 td요소 별로 이름이 아닌 클래스 별로 선택 하면 요소 를 숨기는 것 같습니다 .

예를 들어 왜 : 

$(".bold").hide(); // selecting by class works
$("tcol1").hide(); // select by element name does not work

아래 HTML에서 두 번째 열은 모든 행에 대해 동일한 이름을 갖습니다. 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>
javascript  jquery  html  dom  jquery-selectors 
— TTT
소스
7
질문이 내용과 일치하지 않습니다. 아이디와 이름은 다른 속성이며 다르게 선택됩니다
— Mark W
12
ID가 같은 요소를 갖는 것은 W3C 표준에 위배됩니다. 즉, 중복 ID는 아니요입니다.
— Steve Tauber 1

답변:

2176

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'
— 존 에릭슨
소스
1
호기심에서, tcol1이라는 열 이외의 열을 숨기려는 경우와 같이 어떻게 이것을 NOT tcol1로 작성합니까?
— HPWD
25
@Varun-td를 생략 할 수 있습니다. 예를 들어 $ ( '[name ^ = tcol]')은 'tcol'로 시작하는 값과 'name'속성이있는 모든 요소를 ​​일치시킵니다.
— Jon Erickson
$ ( 'td [name = tcol1]')처럼 사용해야했습니다 .td와 [] 사이에 공백이 없으면 NULL을 반환했습니다.
— akki
@DougMolineux 사실, 그는 이름 의 사전 수정과 일치합니다 .
— mareoraft
7
@HPWD : $("td:not([name='tcol1'])")예를 들어 : not 선택기를 사용합니다 . 이 바이올린
— JohannesB
224

[attribute_name=value]방법을 사용하여 모든 속성을 선택할 수 있습니다 . 여기 에 샘플을 참조 하십시오 :

var value = $("[name='nameofobject']");
— 사용자 2804791
소스
그러나 위의 코드를 사용하여 qoutations를 놓치지 마십시오! 행운을 빌어 서 Stackoverflow 커뮤니티에 오신 것을 환영합니다 :)
— Afzaal Ahmad Zeeshan
7
문 작동하지만 다음 -이 나를 위해 적어도 작동하지 않습니다var value = $("[name=nameofobject]");
— PRANAV
2
이 4 년 원래 허용 대답 한 후 왔을 때 그것은이 저에게 17 upvotes을 놀라운
— Huangism
6
21 upvotes now ... 아마도 td가 필요하지 않기 때문에 대답이 'td [name = tcol1]'보다 덜 혼동되기 때문일 수 있습니다. 따라서 나와 같은 사람들을 잘못된 길로 인도합니다
— Chris Sprague
2
내 입력 이름에는 다음과 같은 []가 <input name="itemid[]">있습니다. 따라서이 답변은 따옴표를 올바르게 사용했기 때문에 허용되는 답변보다 완벽하게 작동했습니다.
— Sunish Menon
62

다음과 같은 것이 있다면 :

<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">
스 니펫 확장

— 안드레아스 L.
소스
26

구식 방식으로 이름을 가진 요소 배열을 가져 와서 해당 배열을 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>
스 니펫 확장

— 친구 켄
소스
24

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>
스 니펫 확장

— 시리 칸트 D
소스
+1 유형을 포함하여 이름 필드를 선택하고 결과를 id 섹션 내로 제한하는 유일한 예입니다.
— SharpC
동의한다. 페이지에 여러 양식을 가질 수 있으며 적절한 양식으로 제한하는 것이 좋습니다.
— Kar.ma
15

프레임 워크는 일반적으로 다음과 같은 형식 으로 대괄호 이름 을 사용합니다 .

<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]\"]")
— itsnikolay
소스
5

간단한 해결책은 다음과 같습니다. $('td[name=tcol1]')

— 손님
소스
5

두 번째 따옴표 세트를 잊어 버렸으므로 허용 된 답변이 잘못되었습니다.

$('td[name="tcol1"]')
— 크리스 제이
소스
예를 들어 필드 이름이 다음과 같은 경우'td[name="nested[fieldName]"]'
— relytmcd
이것은 매우 사실입니다. 올바른 인용 부호없이 속성 기반 선택기 요소를 만나면 최신 버전의 jQuery (v. 3.2.1)가 실패 할 가능성이 훨씬 높습니다.
— HoldOffHunger 2016 년
3

다음과 같은 ID 속성을 사용하여 JQuery에서 요소를 가져올 수 있습니다.

$("#tcol1").hide();
— CalebHC
소스
4
단일 요소에만 해당
— TTT
2
미안합니다. Ben S가 말한대로하십시오.
— CalebHC
네, ID에 대해서는 사실입니다. 이름으로 선택하는 한 도움이되는 Selectors / attributeEquals를 참조하는 게시물이 여기에 있다고 생각합니다.
— TTT
1
아마도 질문이 수정되었을 수도 있지만 지금은 이름 참조를 요구하고 있습니다. 그러나 단일 요소는 id 선택기를 사용할 수 있습니다
— nckbrz
실제로 이름에 대한 질문
— Prathamesh
3

로 모든 속성을 선택 자로 사용할 수 있습니다 [attribute_name=value].

$('td[name=tcol1]').hide();
3

개인적으로, 과거에 한 일은 공통 클래스 ID를 부여하고 그것을 선택하는 데 사용했습니다. 존재하지 않을 수있는 클래스가 지정되어 있기 때문에 이상적이지는 않지만 선택을 훨씬 쉽게 만듭니다. 클래스 이름이 고유한지 확인하십시오.

즉 위의 예에서는 수업별로 선택을 사용합니다. 클래스 이름을 굵게에서 'tcol1'로 변경하는 것이 더 좋으므로 jQuery 결과에 실수로 포함되지 않습니다. 굵은 체가 실제로 CSS 클래스를 참조하는 경우 클래스 속성에서 항상 'class = "tcol1 bold"'를 모두 지정할 수 있습니다.

요약하면 이름으로 선택할 수없는 경우 복잡한 jQuery 선택기를 사용하고 관련된 성능 적중을 수락하거나 클래스 선택기를 사용하십시오.

테이블 이름을 포함하여 항상 jQuery 범위를 제한 할 수 있습니다. 즉 $ ( '# tableID> .bold')

jQuery가 "world"를 검색하지 못하도록 제한해야합니다.

여전히 복잡한 선택 자로 분류 될 수 있지만 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); 
}
— 스티브 차 일즈
소스
다소 장황한 대답이지만 근본적으로 올바른 전체 접근 방식입니다.
— HoldOffHunger 2016 년
2
약간 말로 표현할 수 있지만 조금 설명하는 한 줄보다 약간의 추가 설명과 추론을 제시하는 것이 좋습니다! ;) 누군가가 무언가를 처음 접하고 왜 a) 작동하고 b) 작동하는지 이해하려고 할 때 유용합니다
— Steve Childs
-13

이 기능을 사용할 수 있습니다 :

get.elementbyId();
— 프라 티쉬 고얄
소스
2
OP는 ID가 아닌 이름 으로 가져오고 싶었습니다 . 그리고 무엇 get.elementbyId()입니까? 당신은 의미 했습니까 document.getElementById()?
— barbsan 2018 년
8
아니요, 이름으로 요소를 선택하도록 요청하고 있습니다.
— barbsan 2018 년
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.