Főoldalra

jQuery find()

find ()        Visszaadja, kiválasztott elem leszármazottait.

                        Az összes leszármazott elemhez, használjuk a " * " választót.

Példa.
<div id="listak">
    <ul>
  • <li> <span class="cls"> span elem </span> </li>
  • <li> <span> span elem <span> span elem <span id="spn"> span elem </span></span></span> </li>
  • <li>
      <ol>
    1. <li class="cls"> <span> span elem </span> </li>
      2. </ol>
    </li>
    • </ul>
    <ol>
  1. <li> <span class="cls"> span elem </span> </li>
  2. <li> <span class="cls"> span elem </span> <span> span elem </span> </li>
    3. </ol>
</div> 
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){

  $("#find").click(function(event){
    $("ul").find("li").css({"border": "3px solid red", "background-color": "orange"});
  });
	
  $("#find02").click(function(event){
    $("li").find("span").css({"border": "3px solid red", "background-color": "orange"});
  });
	
  $("#find03").click(function(event){
    $("ul").find("span").css({"border": "3px solid red", "background-color": "orange"});
  });
	
  $("#find04").click(function(event){
    $("ol").find("span").css({"border": "3px solid red", "background-color": "orange"});
  });
	
  $("#find05").click(function(event){
    $("#listak").find("span").css({"border": "3px solid red", "background-color": "orange"});
  });
	
  $("#find06").click(function(event){
    $("#listak").find("ul,ol").css({"border": "3px solid red", "background-color": "orange"});
  });
	
  $("#find07").click(function(event){     $("#listak").find("ul,ol,span")
    .css({"border": "3px solid red", "background-color": "orange"});
  });
	
  $("#find08").click(function(event){
    $("#listak").find(".cls").css({"border": "3px solid red", "background-color": "orange"});
  });
	
  $("#find09").click(function(event){
    $("ul ol").find(".cls").css({"border": "3px solid red", "background-color": "orange"});
  });
	
  $("#find10").click(function(event){
    $("#listak").find("#spn").css({"border": "3px solid red", "background-color": "orange"});
  });
  
  // Szelektorral kiválasztott leszármazott elem, változóhoz rendelése. ---------

	$("#valtozohoz").click(function(event){
		var $leszarmazott = $("span");
		$("ul").find($leszarmazott).css({"color": "black", "border": "3px solid red", "background-color": "orange"});
	});
});
</script>
</head>

<body>
<div id="listak">
    <ul>  
        <li>  <span class="cls"> span elem </span>  </li>
        <li> <span> span elem 
               <span> span elem 
                    <span id="spn"> span elem </span>
               </span>  </span>
        </li>
        <li>
            <ol> <li class="cls">  <span> span elem </span>  </li> </ol>
        </li>
    </ul> 

    <ol>
        <li> <span class="cls"> span elem  </span>  </li>
    </ol>   
 </div>
 <button id="find">ul elemben lévő, li elemek. </button>
 <button id="find02">li elemben lévő, span elemek. </button>
 <button id="find03">ul elemben lévő, span elemek. </button> 
 <button id="find04">ol elemben lévő, span elemek. </button>
 <button id="find05">id="listak" elemben lévő, span elemek. </button>
 <button id="find06">id="listak" elemben lévő, ul és ol elemek. </button>
 <button id="find07">id="listak" elemben lévő, ul, ol és span elemek. </button>
 <button id="find08">id="listak" elemben lévő, class="cls" elemek. </button>
 <button id="find09">ul területén, ol elemben lévő, class="cls" elemek. </button>
 <button id="find10">id="listak" elemben lévő, id="spn" elem. </button>
 <button id="valtozohoz">Változóhoz rendelés.<br /> var $leszarmazott = $("span"); <br />Kattints ide!</button>
</body>


map()
Családfaszerkezet lekérdezése.

Kiválasztott elemhez tartozó leszármazottak, családfaszerkezetének lekérdezése, általunk meghatározott feltételek szerint.

<div id="findadat">
</div> 
    $("#find_map").click(function(event) {  var Find_map = $("#listak").find( " * " )
         .map( function() {  return this.tagName;}  ) .get().join(", ");
          $("#findadat").html("<p>" + Find_map + "</p>");
    });

    $("#find_map02").click(function(event) { var Find_map = $("#listak").find("p, span")
          .map( function() {  return this.tagName;}  ) .get().join(", ");
          $("#findadat").html("<p>" + Find_map + "</p>");
    });

    $("#find_map03").click(function(event) { var Find_map = $("#listak").find("li, span")
         .map( function() {  return this.tagName;}  ) .get().join(", ");
         $("#findadat").html("<p>" + Find_map + "</p>");
    });



Néhány teszt példa. Próbáld ki.

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

<script>
$(document).ready(function(){
  // ---------------------------------------------------------------------------------------------- 	
  $("#htmlfind").click(function(event){  $("html").find("*").css({"color": "black", "border": "3px solid red", "background-color": "orange"});  });
  // ---------------------------------------------------------------------------------------------- 
  $("#bodyfind").click(function(event){  $("body").find("*").css({"color": "black", "border": "3px solid red", "background-color": "orange"});  });
  // ---------------------------------------------------------------------------------------------- 
  $("#divfind").click(function(event){  $("div").find("*").css({"color": "black", "border": "3px solid red", "background-color": "orange"});  });
	
});
</script>
</head>
<body>

<button id="htmlfind">HTML leszármazottai.<br />Kattints ide! </button><br />
<button id="bodyfind">BODY leszármazottai.<br />Kattints ide! </button><br />
<button id="divfind">DIV leszármazottai.<br />Kattints ide! </button><br />
</body>