如何在没有特殊子元素的jQuery中获取元素

Question

现在我使用jQuery来选择某个元素。

CODE：

<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> 

如何做到的jQuery选择第一种形式？即如何获得没有特殊孩子的元素？

Answer 1

您可以使用:not()（或not()）和: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>

请注意，:has不是CSS，它是一个jQuery的附加。 （还有的是在和小康将它添加到CSS的谈话，但它不是在它[但]。）

Answer 2

您可以使用以下的选择：

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

将只能选择form元件，其没有名字为test的后代。

这里是working JSFiddle demo。请注意，第二种形式是红色的，因为它没有test项目。

Answer 3

，如果你正在寻找不具有输入元素与“形式制”级（唯一的区别我可以两种形式之间看到）一个表格，然后

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

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

});