jQuery filter()
filter() Filter = Szűrő. Lekérdezett elemek közül, kiválaszthatjuk azokat, melyek kellenek.
Mely elemek kellenek, írjuk be a filter zárójelei közé.
Lekérdezzük a kiválasztott elemeket, és kiszűrjük azokat, melyek kellenek. Kattints a következő button gombokra! |
<p> Bekezdés szövege. (indexe=0) <span> első span elem</span></p> <p> Bekezdés szövege.(indexe=1) <span> első span elem</span> <span>második span elem.</span></p> <p class="clsp"> Bekezdés szövege.(indexe=2).</p> <pre>Előzők, id="divfilter elemen kívül vannak.</pre>
<div id="divfilter">
<p> Bekezdés szövege. (indexe=3) <span> egy span elemet tartalmaz.</span></p> <p> Bekezdés szövege. (indexe=4).</p> <p class="osztaly"> Bekezdés szövege. (indexe=5).</p> <p>Bekezdés szövege. (indexe=6) <span>első span elem</span> <span> második span elem.</span></p> <p id="egyedi"> Bekezdés szövege. (index 7).</p> <p class="clsp">Bekezdés szövege. (index 8).</p> </div><pre>Következők, id="divfilter elemen kívül vannak.</pre> <p> Bekezdés szövege. (indexe=9) <span> első span elem</span></p> <p> Bekezdés szövege.(indexe=10) <span> első span elem</span> <span>második span elem.</span></p> <p class="clsp"> Bekezdés szövege.(indexe=11).</p> |
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
// ---------------------------------------------------------------
$("#filter").click(function(){
$("p").filter(":even").css({"border": "3px solid red", "background-color": "orange"});
});
// ---------------------------------------------------------------
$("#filter02").click(function(){
$("p").filter(":odd").css({"border": "3px solid red", "background-color": "orange"});
});
// ---------------------------------------------------------------
$("#filter03").click(function(event){
$("p").filter(".osztaly,#egyedi").css({"background-color": "orange"});
});
// ---------------------------------------------------------------------
$("#filter04").click(function(event){
$("p").filter($("p.clsp")).css({"border": "3px solid red", "background-color": "orange"});
});
// ---------------------------------------------------------------------
$("#filter05").click(function(event){
$("p").filter($("#divfilter p.clsp")).css({"background-color": "orange"});
});
// -------------------------------------------------------------------
$("#filter06").click(function(event){
$("p").filter(function(){
return $("span", this).length == 2;}).css({"background-color": "orange"});
});
// -------------------------------------------------------------------
$("#filter07").click(function(event){
$("p").filter(document.getElementById("egyedi"))
.css({"border": "3px solid red", "background-color": "orange"});
});
});
</script>
</head>
<body>
<div id="divfilter">
<p> Bekezdés szövege. (indexe=0) <span> egy span elemet tartalmaz.</span></p>
<p> Bekezdés szövege. (indexe=1).</p>
<p class="osztaly"> Bekezdés szövege. (indexe=2).</p>
<p>Bekezdés szövege. (indexe=3) <span>első span elem</span>
<span> második span elem.</span></p>
<p id="egyedi"> Bekezdés szövege. (index 4).</p>
<p class="clsp">Bekezdés szövege. (index 5).</p>
</div>
<pre>Következők, id="divfilter elemen kívül vannak.</pre>
<p> Bekezdés szövege. (indexe=6) <span> első span elem</span></p>
<p> Bekezdés szövege.(indexe=7) <span> első span elem</span>
<span>második span elem.</span></p>
<p class="clsp"> Bekezdés szövege.(indexe=8).</p>
<button id="filter">Páros p elemek kellenek.</button>
<button id="filter02">Páratlan p elemek kellenek.</button>
<button id="filter03">class="osztaly" és id="egyedi" elemek kellenek.</button>
<button id="filter04">class="clsp" elemek kellenek.</button>
<button id="filter05">class="clsp", melyek id="divfilter" területén vannak.</button>
<button id="filter06">Kellenek, melyek két span elemet tartalmaznak.</button>
<button id="filter07">Csak az id="egyedi" DOM elem kell.</button>
</body>
| |