jQuery contents()

contents()        Visszatér kiválasztott elemhez tartozó, legközelebbi leszármazottakkal.(Gyerekelemével.)

contents("X")   Zárójelben azt is meghatározhatjuk, hogy mely jelölőelemmel rendelkező gyermekek.


Megjegyzés:
A jQuery hibátlan működéséhez, be kell tartani a szabályos xhtml előírásokat.
- Minden kezdő jelölőelemnek, legyen záró eleme.
- Ugyanazon id azonosítóval, csak egy jelölőelem szerepelhet.
- Ugyanazon class osztályazonosítóval, több jelölőelem is szerepelhet.

Példa

<li id="LI01" class="LI01">
<li class="LI01">

Bekezdés.

<li id="LI02" class="LI02"> 
```
<pre> pre elem.</pre>
```
<li class="LI02">

Bekezdés.

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

<head>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js></script>
<script>
$(document).ready(function(){
// Minden div  elem, közvetlen gyermekei.
    $("#contents01").click(function(){
        $("div").contents().css({"color": "black", "border": "2px solid red", "background-color": "orange"});
    });

// Csak a div id="lista" elem, közvetlen gyermekei.
    $("#btnT01").click(function(){
        $("div#lista").contents().css({"color": "black", "border": "2px solid red", "background-color": "orange"});
    });
	
// Minden ul  elem, közvetlen gyermekei.
    $("#btnT02").click(function(){
        $("ul").contents().css({"color": "black", "border": "2px solid red", "background-color": "orange"});
    });

//  Csak az ul id="UL02" elem, közvetlen gyermekei.
    $("#btnT03").click(function(){
        $("ul#UL02").contents().css({"color": "black", "border": "2px solid red", "background-color": "orange"});
    });
	
// Minden li  elem, közvetlen gyermekei.
    $("#btnT04").click(function(){
        $("li").contents().css({"color": "black", "border": "2px solid red", "background-color": "orange"});
    });

//  Minden li class="LI01" elem, közvetlen gyermekei.
    $("#btnT05").click(function(){
        $("li.LI01").contents().css({"color": "black", "border": "2px solid red", "background-color": "orange"});
    });

//  Csak a li id="LI02" elem, közvetlen gyermekei.
    $("#btnT06").click(function(){
        $("li#LI02").contents().css({"color": "black", "border": "2px solid red", "background-color": "orange"});
    });

// --------Kiválasztott elemnek, csak a kiválasztott gyermekei.--------------------------------------------------------	
      
// div id="lista" elemből, csak a p gyermek.
    $("#btnK01").click(function(){
        $("div#lista").contents("p").css({"color": "black", "border": "2px solid red", "background-color": "orange"});
    });
// div id="lista" elemből, csak ul gyermek.
    $("#btnK02").click(function(){
        $("div#lista").contents("ul").css({"color": "black", "border": "2px solid red", "background-color": "orange"});
    });
// div id="lista" elemből, csak ul id="UL01" gyermek.
    $("#btnK03").click(function(){
        $("div#lista").contents("#UL01").css({"color": "black", "border": "2px solid red", "background-color": "orange"});
    });
});
</script>
</head>

<body>
<div id="lista">

        <ul id="UL01">
            <li id="LI01" class="LI01"> 
                <span class="Sp01"> </span>
            </li>
            <li class="LI01">			 
                <span class="Cp01"> </span>
            </li>
        </ul>
		
    <p class="B01"> Bekezdés. </p>
	
        <ul id="UL02">
            <li id="LI02" class="LI02"> 
                <span class="Sp02"> </span> 
                <pre> pre elem.</pre>	 
            </li>
            <li class="LI02">
                <span class="Cp01"> </span> 
            </li>
        </ul>
		
    <p class="B01"> Bekezdés. </p>
</div>

1. <button id="contents01">$("div").contents()<br />                 Minden létező div gyermekei.</button> <br />
2. <button id="btnT01"> $("div#lista").contents()<br />              Csak a div id="lista" elem gyermekei.</button> <br />
3. <button id="btnT02">$("ul").contents()<br />                        Minden létező ul gyermekei.</button> <br /> 
4. <button id="btnT03">$("ul#UL02").contents()<br />               Csak az ul id="UL02" elem gyermekei.</button> <br />
5. <button id="btnT04">$("li").contents()<br />                         Minden létező li gyermekei.</button> <br /> 
6. <button id="btnT05">$("li.LI01").contents()<br />                  Minden li class="LI01" elem gyermekei.</button> <br />
7. <button id="btnT06">$("li#LI02").contents()<br />                 Csak a li id="LI02" elem gyermekei.</button> <br />
8. <button id="btnK01">$("div#lista").contents("p")<br />          Csak P gyermekek, id="lista" elemből.</button> <br />
9. <button id="btnK02">$("div#lista").contents("ul")<br />         Csak UL gyermekek,  id="lista" elemből. </button> <br />
10.<button id="btnK03">$("div#lista").contents("#UL01")<br />  Kiválasztott UL gyermek,  id="lista" elemből.</button> <br /> 

</body>