jQuery | contenidos() con ejemplos

El contenido() es un método incorporado en jQuery que devuelve todos los elementos secundarios directos, incluidos los Nodes de texto y comentarios para el elemento seleccionado.
Sintaxis:

$(selector).contents()

Parámetro: No acepta ningún parámetro.
Valor devuelto: Devuelve todos los elementos hijos directos del elemento seleccionado.

código jQuery para mostrar el funcionamiento de este método:

Código #1:

<html>
  
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/
               jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            <!-- jQuery code to perform this method -->
            $("button").click(function() {
                $("div").contents().filter("p").wrap("<b/>");
            });
        });
    </script>
    <style>
        #p1 {
            width: 420px;
            padding: 50px;
            display: block;
            border: 2px solid green;
            font-size: 30px;
        }
    </style>
</head>
  
<body>
    <div>
        <!-- This paragraph will get bold after click on
              the button -->
        <p id="p1">Welcome to GeeksforGeeks !!!</p>
    </div>
    <!-- click on this button -->
    <button>Click Me!</button>
    <br>
</body>
  
</html>

Salida:
antes de hacer clic en «¡Haz clic en mí!» botón:

después de hacer clic en «¡Haz clic en mí!» botón-

Código #2:
En el siguiente código, no es necesario hacer clic en ningún botón.

<html>
  
<head>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <style>
        #p1 {
            display: block;
            width: 400px;
            padding: 30px;
            border: 2px solid green;
            font-size: 30px;
        }
    </style>
</head>
  
<body>
    <!-- This paragraph will get bold -->
    <p id="p1">Welcome to GeeksforGeeks !</p>
    <script>
        $("p")
            .contents()
            .filter(function() {
                return this.nodeType !== 1;
            })
            .wrap("<b></b>");
    </script>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por kundankumarjha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *