Cómo obtener un elemento sin un hijo especial en jQuery

Question

Ahora uso jQuery para seleccionar algún elemento.

CÓDIGO:

<form class="form-horizontal" action="">
    <div class="form-group">
        <input type="text" name="key_word" class="form-control" value="">
        <button type="submit" class="btn btn-primary btn-bg-red">
            GO
        </button>
    </div>
</form>

Y tengo otra forma:

<form class="form-horizontal" action="">
    <div class="form-group">
        <input type="text" name="key_word" class="form-control" value="">
        <input type="text" name="test" class="form-control" value="">
        <button type="submit" class="btn btn-primary btn-bg-red">
            GO
        </button>
    </div>
</form>

¿Cómo seleccionar el primer formulario con jQuery? A saber, ¿cómo obtener un elemento sin un hijo especial?

javascript jquery

-1

BlueRhino 11 dic. 2015 a las 12:30

Answer 1

Puede usar :not() (o not() ) y :has()

$('form:not(:has(input[name="test"]))').css('background', 'red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form class="form-horizontal" action="">
  <div class="form-group">
    <input type="text" name="key_word" class="form-control" value="">
    <button type="submit" class="btn btn-primary btn-bg-red">
      GO
    </button>
  </div>
</form>
<form class="form-horizontal" action="">
  <div class="form-group">
    <input type="text" name="key_word" class="form-control" value="">
    <input type="text" name="test" class="form-control" value="">
    <button type="submit" class="btn btn-primary btn-bg-red">
      GO
    </button>
  </div>
</form>

$('form').not(':has(input[name="test"])').css('background', 'red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form class="form-horizontal" action="">
  <div class="form-group">
    <input type="text" name="key_word" class="form-control" value="">
    <button type="submit" class="btn btn-primary btn-bg-red">
      GO
    </button>
  </div>
</form>
<form class="form-horizontal" action="">
  <div class="form-group">
    <input type="text" name="key_word" class="form-control" value="">
    <input type="text" name="test" class="form-control" value="">
    <button type="submit" class="btn btn-primary btn-bg-red">
      GO
    </button>
  </div>
</form>

Tenga en cuenta que :has no es CSS, es una adición de jQuery. (Se ha hablado de vez en cuando de agregarlo a CSS, pero no está en él [todavía]).

1

Pranav C Balan 11 dic. 2015 a las 09:45

Answer 2

Si está buscando un formulario que no tiene un elemento de entrada con la clase 'control de formulario' (la única diferencia que puedo ver entre ambos formularios), entonces

var result = $( ".form-horizontal" ).filter( function(){

   return $( this ).find( '.form-control' ).size() == 0;

} );

0

gurvinder372 11 dic. 2015 a las 09:36

Answer 3

Puede usar el siguiente selector:

$("form:not(:has([name='test']))");

Que solo seleccionará elementos form que no tengan descendientes con el nombre test.

Aquí está la demostración de trabajo de JSFiddle. Tenga en cuenta que la segunda forma es de color rojo, porque no tiene ningún elemento test.

0

Yeldar Kurmangaliyev 11 dic. 2015 a las 09:35

Cómo obtener un elemento sin un hijo especial en jQuery

3 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript