반응형
- [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 |