jquery-wie bekommt man den ersten Punkt der Liste mit display:none

Ok, also ich habe das div, welches ein ul:

    <html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    alert($('#slider ul li[display="none"]:first').text());
  });
});
</script>
<style type="text/css">
li
{
display:inline;
margin: 20px;
}
</style>
</head>
<body>
<div id="slider" style="width:100%; overflow-x:hidden"><ul><li style="display:none">Steve 1</li><li style="display:none">Frank</li><li>Tim</li><li>Steve</li><li>Frank</li><li>Tim</li><li>Steve</li><li>Frank</li><li>Tim</li><li>Steve</li><li>Frank</li><li>Tim</li><li>Steve</li><li>Frank</li><li>Tim</li><li>Steve</li><li>Frank</li><li>Tim</li><ul>
</div>
<button type="button" style="float:left">Previous</button><div style="float:right">Next</div>
</body>
</html>

Was ich wollte, geschehen ist, dass, wenn Sie drücken Sie die Schaltfläche es finden würde das erste Element in der Liste mit display none und zeigen Sie eine Nachricht mit Inhalt. In diesem Fall Steve1.

So habe ich $('#slider ul li[display="none"]:first') was bedeutet, es sollte das div benannt regler und es das erste Listenelement in der ul mit display:none.

Erhalte ich eine leere zurück, in der Nachricht.

Weiss jemand was ich falsch mache.

Ich denke, es hat zu tun mit dem Attribut Teil, das ich gebaut von:

http://api.jquery.com/attribute-equals-selector/

  • Es funktioniert nicht, weil es gibt keine solche Sache wie display="none".
InformationsquelleAutor AnonyMouse | 2012-04-25
  1. 2
    $('#slider ul li[style="display:none"]:first')

    Eckigen Klammern wählen Sie Elemente basierend auf den Attributen. Es gab keine display Attribut. Aber die style - Attribut verwendet werden kann. Wenn die style Attribut hat andere Stile als nur display:none dann können Sie ein RegExp-Selektor:

    $('#slider ul li[style*="display:none"]:first')

    Den asterik (*) bedeutet, dass der string kann überall existieren im inneren der tatsächliche Wert des Attributs.

    Hier ist eine demo: http://jsfiddle.net/TAv3d/

    Docs von jQuery-Selektoren: http://api.jquery.com/category/selectors/

    Alternativ können Sie die Funktionen zur DOM-Traversierung (und es ist ein bisschen schneller):

    $('#slider').children('ul').children('li').filter('[style="display:none"]').first();
    InformationsquelleAutor Jasper
  2. 8

    $('#slider ul li:hidden:first') ist, was Sie suchen

    http://api.jquery.com/hidden-selector/

    :hidden entspricht den folgenden Bedingungen, gemäß den obigen link

    Elemente betrachtet werden kann, ausgeblendet aus mehreren Gründen:

    1. Sie haben eine CSS-display-Wert none.
    2. Sie sind form-Elemente mit type="hidden".
    3. Ihre Breite und Höhe explizit auf 0 gesetzt.
    4. Einem übergeordneten element ausgeblendet ist, so dass das element nicht auf der Seite gezeigt werden.
    InformationsquelleAutor Andreas Wong
Schreibe einen Kommentar