jquery에서 요소 세트를 반복하면서 반복

Question

$('form td .hint p')이 jquery selector는 목록 [p,p,p,p,p,p]을 반환합니다.

각각의 루프를 반복하는 가장 좋은 방법은 알고 싶습니다. CSS 값을 확인하고 CSS 값 = 원하는 경우 수행하십시오.

이 기능을 사용하면 툴팁을 표시하거나 숨길 수 있지만 한 번에 하나의 툴팁 만 표시되도록 할 수 있습니다. mouseover와 mouseout이 작동하는 동안 현재 parent(), next() 및 child()를 사용하여 올바른 요소를 찾고 있기 때문에 버그가 있습니다. jquery는 표시하고 숨기는 요소 주위에 div를 즉시 삽입합니다. . 그래서 기본적으로 표시가있는 다른 모든 p 요소 (마우스 오버가 발생할 때마다 숨기기위한 블록)를 강제 실행하려고합니다.

현재이 일을 :

target = $('form td .hint p'); 
target[0].css('display') gives an error. 

target.css('display') seems to only return the css of the first one. 

Answer 1

사용 each()을 :

var displays = ''; 
$("p").each(function(i, val) { 
    displays += "Paragraph " + i + ": " + $(this).css("display") + "\n"; 
}); 
alert(displays); 

이유는이 실패

var target = $("p"); 
var display = target[0].css("display"); 

이 target[0]하지 JQuery와 객체 것입니다. 이 작업을 수행 할 수 있습니다 :

var display = $(target[0]).css("display"); 

또한, 당신은 css() 설명서를 읽으면 :

복귀 첫 일치하는 요소에 스타일의 건물입니다.

언급 할 가치가있는 두 개의 다른 점.

첫째, 직접 툴팁을 작성하는 것은 권장하지 않습니다. 이를위한 많은 플러그인 중 하나를 얻으십시오. 나는 이전에 this one을 사용했고 그 일을했습니다.

둘째, CSS 표시 값을 확인하는 경우 사용할 수있는 바로 가기가있을 수 있습니다. 그래서,

$("p").each(function() { 
    if ($(this).css("display") == "none") { 
    $(this).addClass("blah"); 
    } 
}); 

하지만 당신은 또한 :hidden 및 :visible 선택기를 사용할 수 있습니다 : 예를 들어, 당신이 할 수 css() 통화의

$("p:hidden").addClass("blah"); 

확인 값은 인라인을 확인하고로 크게 신뢰할 스타일 및 스타일 시트 값이 아닙니다.