jquery position()을 활용하여 css 일괄적용

[eq,position활용하여 css 일괄적용]

위 사진처럼 #spot1에는 .detail-wrap과 .m-position, 그리고 사진에는 나와있지 않지만 p태그요소가 들어간다. 

 그리고 #spot1 ~ #spot7까지 총 7개의 요소에 저런식으로 3개가 동시에 들어가게 되면서 굉장히 비효율적인 아름답지 못한 코드가 되어감을 보았다. 

.spot은 좌우 영역에 나눠져서 들어가게 되는데 좌우에 들어가는 css를 1번만 지정해주면 알아서 각 요소별로 위치에 따라 css를 적용하도록 코드를 구현하였다.

1. 전체 화면의 1/2을 나누어 각 요소 위치가 좌측에 있는지 우측에 있는지 확인한다.

var wrap = $(document).width()/2

2. wrap 영역의 위치가 전체화면의 1/2값보다 큰지 작은지 확인후 크다면 left_div 문자열을, 작다면 right_div 문자열을 만들어준다. 만들어진 문자열은 var cls 변수에 대입한다.

var cls = $(wrap)>$(".spot").position().left ? "left_div" : "right_div"

3. cls 변수는 이제 HTML 요소에 class로 들어가게 된다.