1. Description
속성값의 부분 문자열과 매칭되는 Element들을 선택한다.
2. Example
#1버튼을 클릭하면 name에 'va'가 들어가 있는 Element를 찾아서 텍스트의 색상을 파랑으로 변경하고 'is great'이라는 문자열을 추가한다. 버튼을 클릭할 때마다 텍스트의 오른쪽에 클릭한 횟수가 표시된다.
Programming Language
[HTML Code]
[//HTML Code]
3. Code
더보기
<!-- ---------------------------------------------------------
--
-- Author: 1q74.tistory.com
--
--------------------------------------------------------- -->
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>[1q74.tistory.com] javascript/jquery/selector/attribute-contsins</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
<div name="_1q74-example-root">
<div name="_1q74-example-1">
<h4>Programming Language</h4>
<li name="c">C</li>
<li name="c++">C++</li>
<li name="ada">Ada</li>
<li name="lisp">Lisp</li>
<li name="perl">Perl</li>
<li name="python">Python</li>
<li name="java">Java</li>
<li name="javascript">JavaScript</li>
<li name="go">Go</li>
<li name="ruby">Ruby</li>
</div>
<div name="_1q74-example-bottom">
<br/>
<button name="_1q74-btn-execute">#1. $("[name*='va']")</button>
</div>
</div>
<hr/>
<h5>[HTML Code]</h5>
<div name="_1q74-source">
</div>
<h5>[//HTML Code]</h5>
<script>
// 실행버튼을 얻는다.
var btnExecute = $("[name='_1q74-btn-execute']");
// 'va'가 들어간, 즉, 'java'라는 단어간 들어간 요소를 얻는다.
var languages = $("[name*='va']");
// 찾은 요소들의 글자크기를 20px로 변경한다.
// 찾은 요소의 초기 텍스트를 저장한다.
var names = languages.map(function() {
return $(this).text();
}).get();
// 찾은 요소들의 색상을 파랑으로 변경하고,
// 표시되는 텍스트에 문자열을 추가한다.
// (클릭한 횟수를 추가해서 보여준다.)
var clickCount = 0;
btnExecute.click(function() {
languages.each(function(index, el) {
let element = $(el);
let addedText = " is great!!!";
if(clickCount > 0) {
addedText += "(" + clickCount + ")";
}
element.css({ color: "blue", fontSize: "20px" });
element.text(names[index] + addedText);
});
++clickCount;
});
// ------------------------------------------------------
// 소스출력
// ------------------------------------------------------
var textSource = $("[name='_1q74-source']");
var exampleHtml = $("[name='_1q74-example-root']").html();
var specialCharLines = textSource.text(exampleHtml).html().split("\n");
textSource.html(specialCharLines.join("<br/>").replaceAll("\t", " "));
// ------------------------------------------------------
</script>
<style>
[name|='_1q74-example'] li {
list-style-type: none;
}
[name|="_1q74-example"] button {
background: lightgray;
border: 5px outset;
min-height: 30px;
}
[name|="_1q74-example"] button:active {
border: 2px inset;
min-height: 30px;
}
</style>
</body>
</html>4. File
[javascript][jquery]selector-attribute-contains.html
0.00MB
5. Reference
https://api.jquery.com/attribute-contains-selector/
6. See also
【jQuery/Select #4】Attribute Contains Selector [name*=”value”]
속성값의 부분 문자열과 매칭되는 요소들을 선택한다. 1. 예제 Programming Language C C++ Ada Lisp Perl Python Java JavaScript Go Ruby Execute 2. 결과
1q74.tistory.com
'JavaScript > jQuery' 카테고리의 다른 글
| 【jQuery/Selector #6】Attribute Ends With Selector [name$=”value”] (0) | 2023.02.21 |
|---|---|
| 【jQuery/Selector #5】Attribute Contains Word Selector [name~=”value”] (0) | 2023.02.21 |
| 【jQuery/Selector #3】Attribute Contains Prefix Selector [name|=”value”] (0) | 2023.02.21 |
| 【jQuery/Selector #2】:animated Selector (0) | 2023.02.20 |
| 【jQuery/Selector #1】All Selector (“*”) (0) | 2023.02.19 |