1. Description
속성값의 문자열과 정확히 일치하는 Element를 찾는다.
2. Example
#1버튼을 실행할 때마다 value속성이 'love story'로 되어 있는 Element를 찾아서 폰트 크기를 1씩 증가시킨다.
My Stories
[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-equals</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>My Stories</h4>
<li value="tstory">1. TStory</li>
<li value="story challenge">2. Story Challenge</li>
<li value="ustory">3. UStory</li>
<li value="wstory">4. WStory</li>
<li value="story maker">5. Story Maker</li>
<li value="love story" style="color:#567452">6. Love Story</li>
</div>
<div name="_1q74-example-bottom">
<br/>
<button name="btn-execute">#1. $("[value='love story']")</button>
</div>
</div>
<hr/>
<h5>[HTML Code]</h5>
<div name="_1q74-source">
</div>
<h5>[//HTML Code]</h5>
<script>
const btnExecute = $("div[name='_1q74-example-bottom'] [name='btn-execute']");
const loveStory = $("div[name='_1q74-example-1'] [value='love story']");
function changeFontStyle(selector) {
const styles = {
fontSize: parseInt(selector.css("font-size"), 10) + 1
};
selector.css(styles);
}
btnExecute.click(function() {
changeFontStyle(loveStory);
});
// ------------------------------------------------------
// 소스출력
// ------------------------------------------------------
var textSource = $("[name='_1q74-source']");
var exampleHtml = $("[name='_1q74-example-root']").html();
var specialCharLines = textSource.text(exampleHtml).html().split("\n");
function getText(el, beginStr, endStr) {
const start = el.indexOf(beginStr);
const endText = endStr;
const end = el.indexOf(endText);
const btnText = el.substring(start, (end + endText.length));
return btnText;
}
function findLoveStory(i, el) {
const text = getText(el, "6. ", 'Story');
let li = $("<li>")
.attr("value", "love story")
.css({
"list-style-type": "none",
"color": "#567452"
})
.text(text);
const outerHtml = $("<div/>").append(li).html();
specialCharLines[i] = el.replace(text, outerHtml);
}
function findButton(i, el) {
const text = getText(el, "#1", '")');
let button = $("<button>")
.attr("name", "btn-execute")
.text(text);
const outerHtml = $("<div/>").append(button).html();
specialCharLines[i] = el.replace(text, outerHtml);
}
$.each(specialCharLines, function(i, el) {
if(el.indexOf("6. ") > -1) {
findLoveStory(i, el);
}
if(el.indexOf("btn-execute") > -1) {
findButton(i, el);
}
});
textSource.html(specialCharLines.join("<br/>").replaceAll("\t", " "));
textSource.find("button").click(function() {
let selector = textSource.find("[value='love story']");
changeFontStyle(selector);
});
// ------------------------------------------------------
</script>
<style>
[name|='_1q74-example'] li {
list-style-type: none;
}
[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]attribute-equals.html
0.00MB
5. Reference
https://api.jquery.com/attribute-equals-selector/