Auswählen eines Elements mit einem bestimmten Enkelkind.

Question

Ich habe diesen Teil in meinem HTML-Datei

<ul class="noBullets horizontalList"> 
    <li> <a href="home.html">Home</a> </li>  

    <li> <a href="about.html">About</a> </li> 

    <li> 
     <form> 
      <input type="search" name="search" /> 
      <input type="submit" value="Search" /> 
     </form> 
    </li> 
</ul> 

Und ich brauche in der js-Datei ein beliebiges Element in einer horizontalen Liste auszuwählen, die einen Submit-Button enthält und nach rechts schweben zu lassen. Ich habe das versucht und nicht funktioniert:

$('li:contains(type="submit")').css("float", "right"); 

Gibt es einen sauberen Weg, um das zu erreichen?

Answer 1

Verwenden Sie einfach jQuery filter

$('li').filter(function(index) { 
    return $('form button[type="submit"]', this).length > 0; 
}).css("float", "right");; 

Answer 2

Es gibt zwei Probleme mit 'li:contains(type="submit")':

1. Die attribute equals selector Syntax eckige Klammern erfordert, wie '[type="submit"]', aber ...
2. Die :contains() selector Elemente auswählt, die enthalten der angegebene Text, kein geschachtelter Selektor.

ich wahrscheinlich diese von innen nach außen nähern würde, das heißt, wählen Sie die Taste (n) zuerst, dann auf das enthält li Element Ebene hoch (n) die .closest() method mit:

$('input[type="submit"]').closest('li').css("float", "right");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul class="noBullets horizontalList"> 
 
    <li> <a href="home.html">Home</a> </li> 
 
    <li> <a href="about.html">About</a> </li> 
 
    <li> 
 
     <form> 
 
      <input type="search" name="search" /> 
 
      <input type="submit" value="Search" /> 
 
     </form> 
 
    </li> 
 
</ul>