is() और has() से Conditional Checks
is() check करता है कि set में पहला element एक condition से match करता है या नहीं।
In this page:
Syntax
$(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>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<section id="demo">
<p id="text" class="active">Text</p>
</section>
<div id="output"></div>
<script>
var original = $("#demo").html();
$("#runBtn").click(function() {
$("#output").text(String($("#text").is(".active")));
});
$("#resetBtn").click(function() {
$("#demo").html(original);
$("#output").empty();
});
</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>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<section id="demo">
<input id="field" value="hello">
</section>
<div id="output"></div>
<script>
var original = $("#demo").html();
$("#runBtn").click(function() {
$("#output").text(String($("#field").is(function() { return $(this).val().length > 3; })));
});
$("#resetBtn").click(function() {
$("#demo").html(original);
$("#output").empty();
});
</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>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<section id="demo">
<div class="box"><span>Inner</span></div><div class="box"></div>
</section>
<div id="output"></div>
<script>
var original = $("#demo").html();
$("#runBtn").click(function() {
$("#output").text($(".box").has("span").length);
});
$("#resetBtn").click(function() {
$("#demo").html(original);
$("#output").empty();
});
</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>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<section id="demo">
<form id="myForm"><input type="checkbox" checked></form>
<button id="submitBtn">Submit</button>
</section>
<div id="output"></div>
<script>
var original = $("#demo").html();
$("#runBtn").click(function() {
const enabled = $("#myForm").has(":checked").length > 0;
$("#output").text(String(enabled));
});
$("#resetBtn").click(function() {
$("#demo").html(original);
$("#output").empty();
});
</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>
<style>
#box { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
</style>
</head>
<body>
<div id="box" style="display:block">Box</div>
<button id="btn">Check and Fade</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#btn").on("click", function() {
if ($("#box").is(":visible")) {
$("#output").text("Box is visible, fading it out");
$("#box").fadeOut();
} else {
$("#output").text("Box is already hidden");
}
});
$("#resetBtn").on("click", function() {
$("#box").stop(true, true).show();
$("#output").text("");
});
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
.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: