jQuery를 사용하여 요소가 존재하는지 확인
jQuery를 사용하여 요소가 있는지 여부를 확인하는 두 가지 방법이 있습니다. 하나는 길이 속성이고 다른 하나는 메서드를 사용하여 자체 exist() 메서드를 만드는 것입니다. 이 튜토리얼은 요소의 존재 여부를 확인하는 방법을 보여줍니다.
Length 속성을 사용하여 jQuery를 사용하여 요소가 존재하는지 확인
jQuery의 length 속성은 요소의 존재 여부를 확인하는 데 사용할 수 있습니다. 일치하는 총 요소를 반환합니다. 길이가 0을 반환하면 요소가 존재하지 않으며 다른 값은 요소가 있음을 의미합니다.
length 속성의 구문은 다음과 같습니다.
($("element").length)
위의 구문은 0 또는 다른 숫자를 반환합니다.
length 속성을 사용하여 요소의 존재 여부를 확인하는 예제를 시도해보자. 예를 참조하십시오.
<!DOCTYPE html>
<html>
<head>
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<title>jQuery Length</title>
<style>
body {
text-align: center;
}
h1 {
color: lightblue;
font-size: 4.5rem;
}
button {
cursor: pointer;
margin-top: 4rem;
}
</style>
</head>
<body>
<h1>Delftstack | The Best Tutorial Site</h1>
<p id="DemoPara1">This is paragraph 1</p>
<button id="DemoButton1"> Check Paragraph 1</button>
<button id="DemoButton2"> Check Paragraph 2 </button>
<button id="DemoButton3"> Check Heading 1 </button>
<script type="text/javascript">
$(document).ready(function () {
$("#DemoButton1").click(function () {
if ($("#DemoPara1").length) {
alert("Paragraph 1 exists");
}
else {
alert("Paragraph 1 does not exist");
}
});
$("#DemoButton2").click(function () {
if ($("#DemoPara2").length) {
alert("Paragraph 2 exists");
}
else {
alert("Paragraph 2 does not exist");
}
});
$("#DemoButton3").click(function () {
if ($("h1").length) {
alert("Heading 1 exists");
}
else {
alert("Heading 1 does not exist");
}
});
});
</script>
</body>
</html>
위의 코드는 다른 버튼을 눌러 단락과 제목이 있는지 여부를 확인합니다. 출력 참조:
jQuery를 사용하여 요소가 존재하는지 확인하는 사용자 정의 함수 만들기
이제 jQuery에 요소가 있는지 여부를 확인하는 고유한 메서드를 만들어 보겠습니다. 함수를 만드는 구문은 다음과 같습니다.
jQuery.fn.exists = function () {
return this.length > 0;
};
보시다시피 length 속성을 사용하여 jQuery로 exists 함수를 만들었습니다. length 속성은 요소의 존재 여부를 확인하지 않고 요소의 길이를 반환하는 데 사용됩니다. 그렇기 때문에 우리는 우리만의 방법을 한 번 만들고 어디에서나 사용할 수 있습니다.
예를 참조하십시오.
<!DOCTYPE html>
<html>
<head>
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<title>jQuery Exists</title>
<style>
body {
text-align: center;
}
h1 {
color: lightblue;
font-size: 4.5rem;
}
button {
cursor: pointer;
margin-top: 4rem;
}
</style>
</head>
<body>
<h1>Delftstack | The Best Tutorial Site</h1>
<p id="DemoPara1">This is paragraph 1</p>
<button id="DemoButton1"> Check Paragraph 1</button>
<button id="DemoButton2"> Check Paragraph 2 </button>
<button id="DemoButton3"> Check Heading 1 </button>
<script type="text/javascript">
$(document).ready(function () {
jQuery.fn.exists = function () {
return this.length > 0;
};
$("#DemoButton1").click(function () {
if ($("#DemoPara1").exists()) {
alert("Paragraph 1 exists");
}
else {
alert("Paragraph 1 does not exist");
}
});
$("#DemoButton2").click(function () {
if ($("#DemoPara2").exists()) {
alert("Paragraph 2 exists");
}
else {
alert("Paragraph 2 does not exist");
}
});
$("#DemoButton3").click(function () {
if ($("h1").exists()) {
alert("Heading 1 exists");
}
else {
alert("Heading 1 does not exist");
}
});
});
</script>
</body>
</html>
위의 코드는 사용자 정의 함수 exists를 사용하여 요소가 있는지 여부를 확인합니다. 출력은 예제와 유사합니다.
출력 참조:
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook