javascript - 특정 - 자바스크립트 속성값 가져오기




jQuery로 이름으로 요소를 선택하려면 어떻게해야합니까? (10)

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>

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

jQuery는 td 요소를 class 선택했지만 요소 name 으로는 숨길 수 없습니다.

예를 들어, 왜 :

$(".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>

개인적으로, 내가 과거에 한 일은 그들에게 공통된 클래스 ID를 부여하고이를 사용하여 선택하는 것입니다. 존재하지 않을 수도있는 클래스를 지정 했으므로 이상적이지는 않지만 선택이 훨씬 쉽습니다. 당신이 당신의 클래스 이름에서 유일하다는 것을 확인하십시오.

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

요약하면, 이름으로 선택할 수 없다면 복잡한 jQuery 선택기를 사용하고 관련된 성능 히트를 수락하거나 클래스 선택기를 사용하십시오.

테이블 이름 즉, $ ( '# tableID> .bold')를 포함시켜 jQuery 범위를 제한 할 수 있습니다.

jQuery가 "세계"를 검색하지 못하게해야한다.

그것도 여전히 복잡한 선택자로 분류 될 수 있지만 '#tableID'ID로 테이블 내의 모든 검색을 신속하게 제한하므로 처리가 최소한으로 유지됩니다.

# table1 내에서 1 개 이상의 요소를 찾으려면이 방법을 별도로 살펴본 다음 jQuery에 전달하면 범위가 제한되지만 매번 처리 할 때마다 약간의 처리가 필요하지 않습니다.

var tbl = $('#tableID');
var boldElements = $('.bold',tbl);
var rows = $('tr',tbl);
if (rows.length) {
   var row1 = rows[0]; 
   var firstRowCells = $('td',row1); 
}


다음과 같은 경우 :

<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">


다음은 간단한 해결책입니다 : $('td[name=tcol1]')


두 번째 인용문 집합을 잊어 버렸으므로 허용 된 대답이 잘못되었습니다.

$('td[name="tcol1"]') 

attribute 선택기를 사용할 수 있습니다.

$('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] 사용하여 임의의 속성을 선택기로 사용할 수 있습니다.

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

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="text" name="chName"/><br />
    <input type="text" name="chName"/><br />
    <input type="text" name="chName"/><br />
    <input type="text" name="chName"/><br />
    <input type="button" onclick="toggleByName();" value="toggle"/>
  </body>
</html>


<script src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var a= $("td[name=tcol3]").html();
    alert(a);

});

</script>


<table border="3">
<tr>    
    <td>data1</td>
    <td name="tcol1" class="bold"> data2tcol1</td>
</tr>
<tr>    
    <td>data1</td>
    <td name="tcol2" class="bold"> data2tcol2</td>
</tr>  
<tr>    
    <td>data1</td>
    <td name="tcol3" class="bold"> data2tcol3</td>
</tr>
</table>

이것이 도움이 될 수있는 코드입니다.





jquery-selectors