1. Description
특정 문자열이 들어가 있는 Element들을 찾는다.
contains(text)함수 안의 텍스트는 따옴표를 생략할 수 있다.
2. Example
- Amazon
- Tesla
- Netflex
- Apple
- And my future company
['oo'가 들어가 있는 기업]
['le'가 들어가 있는 기업]
['my'가 들어가 있는 기업]
[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/contains</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">
<ol name="bigtech">
<li>Google</li>
<li>Amazon</li>
<li>Facebook</li>
<ol>
<li>Tesla</li>
<li>Twitter</li>
<li>Netflex</li>
</ol>
<li>Apple</li>
<li>And my future company</li>
</ol>
</div>
<div name="_1q74-example-bottom">
<br/>
['oo'가 들어가 있는 기업]<br/>
<button name="btn-contains-oo">$("[name='btn-contains-oo']")</button><br/>
<br/>
['le'가 들어가 있는 기업]<br/>
<button name="btn-contains-le">$("[name='btn-contains-le']")</button><br/>
<br/>
['my'가 들어가 있는 기업]<br/>
<button name="btn-contains-my">$("[name='btn-contains-my']")</button>
</div>
</div>
<hr/>
<h5>[HTML Code]</h5>
<div name="_1q74-source">
</div>
<h5>[//HTML Code]</h5>
<script>
const btnContainsOo = $("[name='btn-contains-oo']");
const btnContainsLe = $("[name='btn-contains-le']");
const btnContainsMy = $("[name='btn-contains-my']");
btnContainsOo.click(function() {
const oo = $("li:contains(oo)");
if(!oo.is("[style]")) {
oo.css({ "font-size": "30px", "color": "blue" });
} else {
oo.removeAttr("style");
}
});
btnContainsLe.click(function() {
const le = $("li:contains('le')");
if(!le.is("[style]")) {
le.css({ "font-size": "30px", "color": "brown" });
} else {
le.removeAttr("style");
}
});
btnContainsMy.click(function() {
const my = $("li:contains(my)");
if(!my.is("[style]")) {
my.css({ "font-size": "30px", "color": "mediumseagreen" });
} else {
my.removeAttr("style");
}
});
// ------------------------------------------------------
// 소스출력
// ------------------------------------------------------
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"] button
,[name="_1q74-source"] button {
background: lightgray;
border: 5px outset;
min-height: 30px;
}
[name|="_1q74-example"] button:active
,[name="_1q74-source"] button:active {
border: 2px inset;
min-height: 30px;
}
</style>
</body>
</html>4. File
[javascript][jquery][selector]contains.html
0.00MB
5. Reference
https://api.jquery.com/contains-selector/
'JavaScript > jQuery' 카테고리의 다른 글
| 【jQuery/Selector #17】:disabled Selector (0) | 2023.02.22 |
|---|---|
| 【jQuery/Selector #16】Descendant Selector (“ancestor descendant”) (0) | 2023.02.22 |
| 【jQuery/Selector #14】Class Selector (“.class”) (0) | 2023.02.22 |
| 【jQuery/Selector #13】Child Selector (“parent > child”) (0) | 2023.02.22 |
| 【jQuery/Selector #12】:checked (0) | 2023.02.22 |