1. Description
| jQuery(":lang(language)") : language코드가 설정된 Element를 찾는다. | |
| 1. language코드 + '-'(하이픈)이 따라오는 Element도 같이 찾는다. ex) :lang(en)은 :lang(en-us)도 포함하여 찾는다. |
2. Example
#1, #3버튼을 클릭하면 해당 laguage코드의 <td>배경색을 변경한다. 버튼을 클릭할 때마 스타일이 토글된다.
#2를 클릭하면 <div name="_1q74-example-1">의 하위Element 배경색이 변경된다.
:lang(language)앞에 태그(예지에서는 <td>)가 생략되면 <html lang="ko">를 인식한다.
| en | en-us |
| ko | ko-kr |
| ja | ja-jp |
[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/lang</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">
<table name="languages" border="1">
<tr>
<td lang="en">en</td>
<td lang="en-us">en-us</td>
</tr>
<tr>
<td lang="ko">ko</td>
<td lang="ko-kr">ko-kr</td>
</tr>
<tr>
<td lang="ja">ja</td>
<td lang="ja-jp">ja-jp</td>
</tr>
</table>
</div>
<div name="_1q74-example-bottom">
<br/>
<button name="btn-find-en">#1. $("[name='_1q74-example-1'] td:lang(en)")</button><br/>
<button name="btn-find-ko">#2. $("[name='_1q74-example-1'] :lang(ko)")</button><br/>
<button name="btn-find-ja">#3. $("[name='_1q74-example-1'] td:lang(ja)")</button>
</div>
</div>
<hr/>
<h5>[HTML Code]</h5>
<div name="_1q74-source">
</div>
<h5>[//HTML Code]</h5>
<script>
var btnEn = $("[name='_1q74-example-bottom'] [name='btn-find-en']");
var btnKo = $("[name='_1q74-example-bottom'] [name='btn-find-ko']");
var btnJa = $("[name='_1q74-example-bottom'] [name='btn-find-ja']");
var en = $("[name='_1q74-example-1'] td:lang(en)");
var ko = $("[name='_1q74-example-1'] :lang(ko)");
var ja = $("[name='_1q74-example-1'] td:lang(ja)");
function changeBackgroundColor(el, color) {
if(!el.is("[style]")) {
el.css("background", color);
} else {
el.removeAttr("style");
}
}
btnEn.click(function() {
changeBackgroundColor(en, "#25D125");
});
btnKo.click(function() {
changeBackgroundColor(ko, "#2557D1");
});
btnJa.click(function() {
changeBackgroundColor(ja, "#CC25D1");
});
// ------------------------------------------------------
// 소스출력
// ------------------------------------------------------
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-root"] {
min-height: 170px;
}
[name="_1q74-example-1"] {
min-height: 140px;
}
[name="_1q74-example-root"] [type="image"]{
width: 100px;
}
[name="_1q74-example-1"] td {
min-width: 100px;
min-height: 30px;
}
[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]lang.html
0.00MB
5. Reference
https://api.jquery.com/lang-selector/
'JavaScript > jQuery' 카테고리의 다른 글
| 【jQuery/Selector #38】:last-of-type Selector (0) | 2023.03.05 |
|---|---|
| 【jQuery/Selector #37】:last-child Selector (0) | 2023.03.05 |
| 【jQuery/Selector #35】:input Selector (0) | 2023.03.05 |
| 【jQuery/Selector #34】:image Selector (0) | 2023.03.05 |
| 【jQuery/Selector #33】ID Selector (“#id”) (0) | 2023.03.05 |