jQuery is()
is() metódus. Kiválasztott elemről lekérdezett információ, megfelel az általunk elvárt feltételnek, true vagy false.
True vagy false.
Kiválasztott elemről lekérdezett információ, megfelel az általunk elvárt feltételnek.
Példa: Kiválasztott input bemenetnek közvetlen szülője a kiválasztott form elem.
Igaz, akkor is() metódus true, nem igaz, akkor is() metódus false értékkel tér vissza.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#is_form" ).click(function() {
var eredmeny = $( "input[type='checkbox']" ).parent().is( "form" );
$( "#valasz" ).text( "Válasz = " + eredmeny );
});
$("#is_form01" ).click(function() {
var eredmeny = $( "input[type='checkbox']" ).parent().is( "#form01" );
$( "#valasz" ).text( "Válasz = " + eredmeny );
});
$("#is_form02" ).click(function() {
var eredmeny = $( "input[type='checkbox']" ).parent().is( "#form02" );
$( "#valasz" ).text( "Válasz = " + eredmeny );
});
});
</script>
</head>
<body> <form name="form01" id="form01"> <input type="checkbox"> <p><input type="checkbox"></p> </form> <form name="form02" id="form02"> <input type="text"> <p><input type="text"></p> </form> <br />Igaz vagy nem, hogy form a közvetlen szülő elem?<br /> <span id="valasz"></span> <button id="is_form">is form</button> <button id="is_form02">is form02</button> <button id="is_form01">is form01</button> |
Igaz vagy nem, hogy form a közvetlen szülő elem? |
Keressük azt a li elemet, melyben kettő strong tag is van.
Keresési feltétel nem teljesül, akkor is() metódus false értékkel tér vissza, és a li elem, piros háttérszínben jelenik meg.
Teszteléshez, kattints a li elemekre!
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$( "li" ).click(function() {
var li = $( this ),
VanKettoStrong = li.is(function() { return $( "strong", this ).length === 2; });
if ( VanKettoStrong )
{
li.css({"color": "black", "border": "3px solid red", "background-color": "orange"});
}
else
{
li.css({"color": "black", "border": "3px solid green", "background-color": "red"});
}
});
});
</script>
</head>
<body>
<ul>
<li>Listaelem <strong>li elemek között, az első. </strong></li>
<li>Másik listaelem, <span>li elemek között, a második.</span><li>
<li>Ez is egy listaelem, li elemek között, ez a harmadik.</li>
<li><strong> Kiemelt szöveg </strong> normál szöveg
<strong> kiemelt szöveg</strong> normál szöveg
<span> li elem, kettő strong tagot tartalmaz.</span>
</li>
<li>Ez is, listaelem</li>
</ul>
</body>
|
|
Az ul elem területén történő kattintási esemény.
Esemény figyelése, az ul elem közvetlen gyermekeire, azaz, kizárólag a li elemekre vonatkozik.
A li elemek leszármazottjaira, strong vagy span elemkre, nem.
is( "li" ) metódus, csak akkor ad true értéket, ha ul elem közvetlen gyermekeire, a li elemre kattintunk.
Teszteléshez:
- Kattints strong, vagy span elem területén lévő szövegre, nem történik semmi.
- Majd, kattints a li elem normál szövegére.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
// --- Csak a li elemekre kattintás aktív. Belső tag elemekre, nem. ------
$("#UL02").click(function( event ) {
var celpont = $( event.target );
if ( celpont.is( "li" ) ) {
celpont.css({"color": "black", "border": "3px solid red", "background-color": "orange"});
}
});
});
</script>
</head>
<body>
<ul>
<li>Listaelem <strong>li elemek között, az első. </strong></li>
<li>Másik listaelem, <span>li elemek között, a második.</span><li>
<li>Ez is egy listaelem, li elemek között, ez a harmadik.</li>
<li><strong> Kiemelt szöveg </strong>
normál szöveg
<strong> kiemelt szöveg</strong>
normál szöveg
<span> li elem, kettő strong tagot tartalmaz.</span>
</li>
<li>Ez is, listaelem</li>
</ul>
</body>
|
|