jQuery selector [name=”value”]

Programming

jQuery selector [name=”value”]

알 수 없는 사용자 2018. 3. 8. 09:46

jQuery selector들 중에 [name=”value”]는 제일 흔하게 사용합니다.

단순하게 속성의 값이 = (equals)인 것을 찾아라라는 역할을 하죠.

예제)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attributeEquals demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>
  <label>
    <input type="radio" name="newsletter" value="Hot Fuzz">
    <span>name?</span>
  </label>
</div>
<div>
  <label>
    <input type="radio" name="newsletter" value="Cold Fusion">
    <span>value?</span>
  </label>
</div>
<div>
  <label>
    <input type="radio" name="newsletter" value="Evil Plans">
    <span>value?</span>
  </label>
</div>
 
<script>
$( "input[value='Hot Fuzz']" ).next().text( "Hot Fuzz" );
</script>
 
</body>
</html>

실행 결과)

name?

value?

attributeEquals demo

설명)

html 상단에는 각종 컨포넌트들이 나열되어 있고 하단부에서 <script>로 바로 자바스크립트 실행이 됩니다.

스크립트에서 $( "input[value='Hot Fuzz']" ) 이 셀렉터는 input 태그들 중 value라는 속성 값이 'Hot Fuzz'로 되어 있는 것을 찾은 다음.

next() 즉 input의 다음 엘레먼트를 찾아라. 여기서는 <span>태그들이 되겠네요.

물론 예제에서는 3개의 input box들이 모두 다음 엘레먼트가 <span>들로 되어 있지만

어떤 것은 <div>로 또 어떤 것은 <p>가 있을 수도 있고...다음 엘레먼트 자체가 없을 수도 있겠지요.

어쨌든 조건에 맞으면 selector가 되는거고 안되면 마는겁니다.

next()로 찾은 엘레먼트의 text값을 즉, 원래의 본문의 값인 "name?"이라는 문자열이 "Hot Fuzz"로 변경이 된 것입니다.

결국, $( "input[value='Hot Fuzz']" )에 조건에 맞는 것은 첫 번째 input만 해당 하므로

첫 번째 input의 다음 컨포넌트인 <span>의 text만 "Hot Fuzz"로 바뀌었습니다.

자, 그럼 여기서 한가지 응용을 해 볼까요?

각 input 태그들의 type을 radio, text, checkbox로 하되, name은 다 똑같게 하고. name이 newsletter이면서 checkbox만 찾아서

다음 컨포넌트의 text값을 "good luck!"으로 바꾸게 하려면 어떻게 해야 할까요?

<div>
  <label>
    <input type="radio" name="newsletter" value="Hot Fuzz">
    <span>name?</span>
  </label>
</div>
<div>
  <label>
    <input type="text" name="newsletter" value="Cold Fusion">
    <span>value?</span>
  </label>
</div>
<div>
  <label>
    <input type="checkbox" name="newsletter" value="Evil Plans">
    <span>value?</span>
  </label>
</div>

바로 아래처럼 지정하시면 됩니다.

$( "input[type='checkbox'][name='newsletter']" ).next().text( "good luck!" );

적용 결과)

name?

value?

[type='checkbox']이면서 [name='newsletter']를 찾아라. 즉, and 조건이 되는 것입니다.

'Programming' 카테고리의 다른 글

jQuery Selector 지정 문자열로 끝나는 요소를 찾아보자 (0)	2018.03.09
jQuery Selector 속성값 다른 것 찾기 [name!=”value”] (0)	2018.03.08
jQuery 접두사 일치 찾기 셀렉터 (0)	2018.03.07
jQuery 문자열 포함 찾기 셀렉터 (0)	2018.03.07
jQuery 셀렉터 - All Selector (“*”) (0)	2018.03.07

현재글jQuery selector [name=”value”]

procodes