Főoldalra

jQuery :empty és not(:empty)


:empty                  Visszaadja az üres elemeket.

:not(:empty)          Visszaadja a nem üres elemeket.

Megjegyzés:
Üres elemnél, a kezdő és záró elem között, szóköz sem lehet.
Példa:    Üres elem =  <p></p>        Nem üres elem = <p>  </p> és ez sem  <p>&nbsp;</p>

A form (űrlap) input elemekre nem alkalmazhatjuk. Erről a lenti teszteknél is meggyőződhetünk.
A form elemekre, jquery meghatározásoz,  JavaScript meghatározást kell írnunk, melyet lentebb láthatunk. 

Olyan elemekre alkalmazhatjuk, melyeknek van különálló záró eleme is. (<p> Valami. </p>)
img és input elemekre nem alkalmazhatjuk, mert nincs különálló záró elemük. ( Ilyen űrlapelem nincs:  <input> Valami. </input>

A szelektor oszlopban, kattints az általad kiválasztottra, és láthatod az eredményt.

Szelektorok.
$("#egyedi") <p>
azonosítója id="egyedi"
$("p:first") Első
<p> elem
$("p:first:not(:empty)") Első <p>
Nem üres.
$("p:first:empty") Első <p>
Üres.
$("p:eq(3)") 4. <p> elem
(Első p indexértéke = 0)
$("p:eq(3):not(:empty)") 4. <p>
Nem üres.
$("p:eq(3):empty") 4. <p>
Üres.
$("p:not(:empty)") Nem üres <p>
elemek keresése.
$("p:empty") Üres elemek <p></p>
keresése. (:empty)
Form, input empty és not(:empty) tesztelése.

<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js></script>
<input> azonosítója id="inp04"

Első <input> elem.

2. input elem. (Első input indexértéke = 0)


 Nem üres input elemek.
(jQery nem válaszol.)

 Üres input elemek.
(jQery nem válaszol.)

Statisztikai adatok.
$("p").length; Összes p elem számának,
kiíratása. (Jó.)
$("p:empty").length; Üres p elemek számának,
kiíratása. (Jó.)
$("input").length; Összes input elem számának,
kiíratása. (Jó.)
$("input:empty").length; Üres input elemek számának,
kiíratása. (Hibás.)
$("#inp").val(); input id="inp",
tartalma. (Jó.)
$("#inp04").val(); input id="inp04",
tartalma. (Jó.)
<div>

<p> p elem. A következő Teszt p elem, üres.</p>

<p> p elem. A következő Teszt p elem, üres.</p>

<p> p elem. A következő Teszt p elem, üres.</p>

<p id="egyedi"> p elem. A következő Teszt p elem, üres.</p>

<p id="P04"> p elem.>/p>

<form name="urlap01" id="urlap01">
0. input: <input type="text" name="inp" id="inp" value="valami" /> 1. input: <input type="text" name="inp01" id="inp01" value="" />
2. input: <input type="text" name="inp02" id="inp02" value="" />
</form>
<form name="urlap02" id="urlap02">
0. input: <input type="text" name="inp03" id="inp03" value="valami" /> 1. input: <input type="text" name="inp04" id="inp04" value="" />
2. input: <input type="text" name="inp05" id="inp05" value="" />
</form>
</div>


Statisztikai adatok:

input adatok:


 

Következő példák,  jQuery és JavaScript kombinációja.  A button gombra kattintva információt kapunk, a fenti  form (ürlap) input elemeiről.
Módosítsuk a fenti form (ürlap) inputelemek adatait, és ismét kattintsunk a button gombra.




Megjegyzés: ( 2016 jQery)
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js></script> változata,
a következő szelektorokat nem ismeri:   $("input:not(:empty)")   és   $("input:empty")
Ezek helyettesítésére, jQery szelektorhoz, a jól bevált JavaScript programot is, alkalmaznunk kell.

<head>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js></script>

<script>
$(document).ready(function(){
// ---------- Kiválasztott input, adatának lekérdezése. ---------------------------------------------
	$("#inpAdat").click(function(){	
	  var InputAdat= $("#inp").val();
		var tartalom= "Kiválasztott input elem tartalma= "+ InputAdat;
		$("#input_adat").html(tartalom);
	});
	
	$("#inpAdat02").click(function(){	
	  var InputAdat= $("#inp04").val();
		var tartalom= "Kiválasztott input elem tartalma= "+ InputAdat;
		$("#input_adat").html(tartalom);
	});

// ------ Összes üres input elem. --------------------------------------------------------------------	
	$("#ures_inputok").click(function(){
			var inputok_szama = $("input").length;
			var input_elem=$("input");
		
			for(i=0; i<inputok_szama; i++){
				var xx=input_elem[i].value;
				if(xx == ""){input_elem[i].style.backgroundColor="orange"; }       // Összes, üres elemek kijelölése.           
		}
	});
	
	
// ------ Összes nem üres input elem. -----------------------------------------------------------------		
	$("#nemures_inputok").click(function(){
			var inputok_szama = $("input").length;
			var input_elem=$("input");
		
			for(i=0; i<inputok_szama; i++){
				var xx=input_elem[i].value;
				if(xx != ""){input_elem[i].style.backgroundColor="orange"; }       // Összes, nem üres elemek kijelölése.
		}
	});	
	
	

 // ------ Minden input adat kiíratása, és üres mezők kijelölése. ----------------------------------------
  $("#jsinput").click(function(){
  
             var tomb= new Array();
             var inputok_szama = $("input").length;
             var input_elem=$("input");
	
    // -------- Üres mezők kijelölése.		
             for(i=0; i<inputok_szama; i++){
                  var xx=input_elem[i].value;
                      tomb[i]=xx;                                                         // Tömbbe íratjuk az adatokat, így azokat is lekérdezhetjük.
                    if(xx != ""){input_elem[i].style.backgroundColor="white"; }
                      else{input_elem[i].style.backgroundColor="orange"; }
                }

    // -------- Adatok lekérdezése.	
             for(i=0; i<inputok_szama; i++){
                     if(tomb[i] !=""){tartalom=(i+". "+tomb[i]+"<br />"); $("#input_adat").append(tartalom);   }
                        else {tartalom=(i+". Üres.<br />");  $("#input_adat").append(tartalom);   }
                }
	
    });
	
	
});
</script>
</head>