반응형
- [name|=value]
jQuery Selector에서 흔하게 사용하는 [name=value]가 아닌 [name|=value]를 알아보도록 하겠습니다.
예제)
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>attributeContainsPrefix demo</title> <style> a { display: inline-block; } </style> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <a href="example.html" hreflang="en">Some text</a> <a href="example.html" hreflang="en-UK">Some other text</a> <a href="example.html" hreflang="english">will not be outlined</a> <script> $( "a[hreflang|='en']" ).css( "border", "3px dotted green" ); </script> </body> </html>
결과)
[name|=value]는 속성 값이 접두사 포함되어 있는 경우를 찾아 줍니다.
$( "a[hreflang|='en']" ).css( "border", "3px dotted green" );
이 예제를 예를 들면 a 태그 중에 hreflang라는 속성 값이 en인 값을 찾는데
값 중에 - (하이픈)이 있는 경우는 하이픈 기준으로 잘라서 앞쪽 이름을 보게 됩니다.
이러면 하이픈을 이용해서 그룹핑을 해서 사용 할 수 있겠죠.
반응형
'Programming' 카테고리의 다른 글
jQuery Selector 속성값 다른 것 찾기 [name!=”value”] (0) | 2018.03.08 |
---|---|
jQuery selector [name=”value”] (0) | 2018.03.08 |
jQuery 문자열 포함 찾기 셀렉터 (0) | 2018.03.07 |
jQuery 셀렉터 - All Selector (“*”) (0) | 2018.03.07 |
jQuery closest - 나의 첫번째 조상 찾기 (0) | 2018.03.07 |