반응형
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인 값을 찾는데
값 중에 - (하이픈)이 있는 경우는 하이픈 기준으로 잘라서 앞쪽 이름을 보게 됩니다.
이러면 하이픈을 이용해서 그룹핑을 해서 사용 할 수 있겠죠.
반응형
'development > script' 카테고리의 다른 글
| jQuery All Selector (0) | 2018.03.07 |
|---|---|
| [jQuery] Selector 문자열 포함 찾기 [name*=”value”] (0) | 2018.03.07 |
| [jQuery] 나의 첫번째 부모/조상 찾기 - closest (0) | 2018.03.06 |
| [jQuery] SELECTOR (0) | 2018.03.05 |
| [javascript] ActiveXObject를 이용한 텍스트 파일 읽기/쓰기 (0) | 2018.03.05 |