is() और has() से Conditional Checks
In this page:
$(selector).is(selector);
$(selector).has(selector);is()
.is() current selection को एक selector के against test करता है और बिना select किए हुए को बदले एक plain true या false return करता है। बिना tag names या classes manually compare किए 'क्या यह element X से match करता है?' पूछने का यह standard तरीका है।
उदाहरण: is()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="text" class="active">Text</p>
<script>
console.log($("#text").is(".active"));
</script>
</body>
</html>Functions के साथ is()
is() एक selector के बजाय एक function भी ले सकता है, आपको यह तय करने के लिए custom logic लिखने देते हुए कि कोई element match count करता है या नहीं। यह उन conditions के लिए उपयोगी है जिन्हें एक plain CSS selector के रूप में express नहीं किया जा सकता, जैसे किसी data attribute की numeric value check करना।
उदाहरण: is() with Functions
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input id="field" value="hello">
<script>
console.log($("#field").is(function() { return $(this).val().length > 3; }));
</script>
</body>
</html>has()
has() खुद elements को test करने के बजाय selection में सिर्फ उन elements को रखता है जिनमें एक matching descendant element शामिल है। यह filter() या is() से अलग है, जो selected elements को सीधे test करते हैं, उनके अंदर nested की गई चीज़ को नहीं।
उदाहरण: has()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div class="box"><span>Inner</span></div><div class="box"></div>
<script>
console.log($(".box").has("span").length);
</script>
</body>
</html>Checks को Combine करना
is() और has() conditional UI logic के लिए उपयोगी हैं, जैसे किसी button को सिर्फ तभी enable करना जब किसी form में has() कम से कम एक checked checkbox हो, या toggle करने से पहले is() से check करना कि क्या किसी element में पहले से active class है। इन्हें combine करना आपको किसी element की अपनी state और उसके contents दोनों पर branch करने देता है।
उदाहरण: Combining Checks
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<form id="myForm"><input type="checkbox" checked></form>
<button id="submitBtn">Submit</button>
<script>
const enabled = $("#myForm").has(":checked").length > 0;
console.log(enabled);
</script>
</body>
</html>Practical Checks
इस तरह के conditional checks आपको page बदलने से पहले decisions लेने में मदद करते हैं, जैसे किसी element को animate करने की कोशिश करने से पहले confirm करना कि यह is() इस समय visible है। यह आपके logic जिस state को मानता है उसमें न होने वाले elements के against code चलाने से बचाता है।
उदाहरण: Practical Checks
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box" style="display:block">Box</div>
<script>
if ($("#box").is(":visible")) {
$("#box").fadeOut();
}
</script>
</body>
</html>.is(".active")के result को जैसे यह एक jQuery object हो इस्तेमाल करना और उस पर.addClass()chain करना, जबकि.is()एक plain boolean return करता है।- यह उम्मीद करना कि
.has("span")true या false return करेगा, जबकि यह एक filtered jQuery set of elements return करता है जिनमें एक matching descendant है। - कई elements वाली एक selection पर
.is(".active")call करना और यह मान लेना कि सबको match होना ज़रूरी है; यह true return करता है अगर कम से कम एक element match करे।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: