2012-04-25 3 views
1

Ok, так что у меня есть этот DIV, который содержит ул:JQuery как получить первый элемент списка с дисплеем: ни один

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

То, что я хотел случиться, что при нажатии на кнопку Назад он найдет первый элемент в списке с отображением none и показ сообщения с его содержимым. В этом случае Steve1.

Таким образом, я использовал $('#slider ul li[display="none"]:first'), что означает, что он должен найти ползунок с именем по имени, и это первый элемент списка в ul с отображением: none.

Получаю пустое сообщение.

Кто-нибудь знает, что я делаю неправильно.

Я думаю, что это надо делать с атрибутом части, я построенной:

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

+0

Это не потому что нет такой вещи, как 'display =" none ". – Sparky

ответ

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

Квадратные скобки выберите элементы, основанные на атрибутах. Не было атрибута display. Но можно использовать атрибут style. Если атрибут style имеет другие стили, чем просто display:none то вы можете использовать селектор RegExp:

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

asterik (*) означает, что строка может существовать в любом месте внутри фактического значения атрибута.

Вот демо: http://jsfiddle.net/TAv3d/

Docs для JQuery селекторы: http://api.jquery.com/category/selectors/

В качестве альтернативы вы можете использовать функции для DOM обхода (и это немного быстрее):

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

$('#slider ul li:hidden:first') является то, что вы ищете

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

:hidden соответствует следующим условиям, в соответствии со ссылкой выше

элементов можно считать скрытыми по нескольким причинам:

  1. Они имеют дисплей CSS значение нет.
  2. Это элементы формы с типом = «скрытые».
  3. Их ширина и высота явно установлены в 0.
  4. Элемент предка скрыт, поэтому элемент не отображается на странице.
Смежные вопросы