jQuery foreach 루프, 여러 CSS 값?

Question

.each() CSS 값을 루프하려고합니다. 색인을 얻는 방법을 알고 있습니다. Fiddle 나는 브라우저가 800 픽셀 아래에있을 때 jQuery 코드는 내가 변화를 왼쪽 위치를 작성하기 때문에 브라우저가 800 픽셀 이상으로 다시 크기를 조정할 때, 왼쪽 값을 저장하기위한 것입니다 아이디어는 내가 다시 의지 할

var pos = $('.sublayer_1 div').css('left'); 

    function adjustAttempt3() { 

     $(".sublayer_1 div").each(function (index) { 
      alert(index + ":" + pos); 
     }); 

    } 

기본 왼쪽 값으로.

FYI css는 솔루션이 아닙니다. 왼쪽 값은 데이터베이스에서 가져온 것이므로 동적입니다.

그래서 각 왼쪽 위치를 저장하고 if 문에 사용하려고합니다.

여기에 샘플 HTML 코드가 나와 있습니다. 자세한 내용은 fiddle을 참조하십시오.

<div class="sublayer_1"> 
    <div style="position: absolute; left: 100px;">Coffee</div> 
    <div style="position: absolute; left: 300px;">More Coffee</div> 
</div> 

사이드 참고 : 문이 크기 조정 기능에 호출되는 함수에 싸여 경우 오리지널 왼쪽 위치

if((w) > 800) { 
     $Q('#main').css({'margin-top': mar }); 
     $Q('.sublayer_1 div, .sublayer_1 img').css(pos); 
     alert(pos) 
    } 
    else { 
     $Q('.sublayer_1 div, .sublayer_1 img').css({'left': w/2}); 
     $Q('#main').css({'margin-top': w_d + m_d });   
    } 

이 저장하여 무슨 뜻인지에더. if((w) > 800) 문에있는 변수는 디폴트 값을 선택하는 함수 외부에있는 반면 else 문 내의 변수는 동적이되도록 resize 함수 내에 있습니다.

관례대로 IDK는이 속도가 어떻게 느껴지지만 방금 나에게 왔고 작동하지만 각각의 왼쪽 가치를 얻는 데 어려움을 겪고 있습니다. 그래서 내가 위에 한 일을 묻습니다.

Answer 1

나는 각 요소에 대해 .data를 통해 원래의 CSS 값을 저장 할

:

$(".sublayer_1 div").each(function() { 
    $(this).data('origLeft', $(this).css('left')); 
}); 

동적으로 HTML을 생성하는 경우, 이 호출을 할 필요가 없으면 값을 HTML에 직접 저장할 수 있습니다.

<div style="position: absolute; left: 100px;" data-orig-left="100px">Coffee</div> 

그럼 당신은 나중에 그것을 얻을 수면 : [`.css` 문서]에서

$(".sublayer_1 div").each(function() { 
    var left = $(this).data('origLeft'); 
}); 

Answer 2

each에 전달 된 함수 내에서 $(this)을 사용하여 현재 요소를 검색 한 다음 left 값을 가져옵니다.

function adjustAttempt3() { 

    $(".sublayer_1 div").each(function (index) { 
     alert(index + ":" + $(this).css("left")); 
    }); 
} 

JsFiddle :http://jsfiddle.net/vGQXT/6/

Answer 3

당신이이 선택을 만족하는 첫 번째 요소의 left 값을 가져옵니다 var pos = $('.sublayer_1 div').css('left');을 말할 때, 당신은 당신이 현재 루프 요소의 위치를하려는 each 루프에 필요, 그래서

는

이 있어야한다

function adjustAttempt3() { 
    $(".sublayer_1 div").each(function (index) { 
     var pos = $(this).css('left'); 
     alert(index + ":" + pos); 
    }); 
} 


//Attempt 3 
adjustAttempt3(); 

,

데모 : Fiddle

Answer 4

당신이 그것을 얻기 위해 반복하지 않는 한 당신은 첫 번째 div의 left 위치를 얻고있다.

이 시도 :

function adjustAttempt3() { 

    $(".sublayer_1").find('div').each(function (index) { 
     var pos = $(this).css('left'); 
     alert(index + ":" + pos); 
    }); 


} 

라이브 예 : http://jsfiddle.net/vGQXT/3/