¿Cómo seleccionar todos los elementos sin una clase dada usando jQuery?

Todos los elementos que no coincidan con el selector dado se pueden seleccionar usando jQuery( “:not(selector)” ). Por ejemplo, el primer ejemplo selecciona todos los elementos <li> que no están activos.

Ejemplo 1: este ejemplo selecciona elementos <li> que no contienen la clase activa .

<!DOCTYPE html>
<html>
      
<head>
    <title>
        How to select all elements without
        a given class using jQuery ?
    </title>
      
    <meta charset="utf-8">
      
    <script src=
        "https://code.jquery.com/jquery-1.10.2.js">
    </script>
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
      
    <b>
        Select all elements without a<br>
        given class using jQuery
    </b>
      
    <ul>
        <li class="active">element 1</li>
        <li>element 2</li>
        <li>element 3</li>
        <li>element 4</li>
    </ul>
      
    <script>
        $("li:not(.active)").css(
                "background-color", "yellow" );
    </script>
</body>
  
</html>

Producción:

También se puede hacer usando .not(selector).

Ejemplo 2: este ejemplo selecciona elementos <div> que no contienen la clase green o id blue .

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
      
    <script src=
        "https://code.jquery.com/jquery-1.10.2.js">
    </script>
      
    <style>
        div {
            width: 50px;
            height: 50px;
            margin: 10px;
            float: left;
            border: 2px solid black;
        }
        .green {
            background: #8f8;
        }
        .orange {
            background: orange;
        }
        #blue {
            background: #99f;
        }
    </style>
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
      
    <b>
        Select all elements without a
        given class using jQuery
    </b>
    <br><br>
  
    <div></div>
    <div id="blue"></div>
    <div></div>
    <div class="green"></div>
    <div class="green"></div>
    <div class="orange"></div>
    <div></div>
      
    <script>
        $("div").not(".green, #blue")
            .css("border-color", "red");
    </script>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por tanishqporwar22 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 *