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?
3 respuestas
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]).
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;
} );
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
.
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.