2012-06-10 6 views
1

인라인 블록 요소가 포함 된 지정된 너비 980 픽셀의 컨테이너가 있습니다. 각 요소는 폭과 높이가 140px입니다. 즉, 각 행/행은 다음 행/행으로 푸시 다운되기 전에 7 개의 요소를 포함 할 수 있습니다. 내가 그 요소에 어떤 열 자바 스크립트 (하지 jQuery를) 어떤 라인/행과 함께 결정 어떻게 요소의 수를 알고요소 수를 기준으로 줄 번호를 계산하십시오.

<div id="container"><div id="ele1"></div><div id="ele2"></div><div id="ele3"></div><div id="ele4"></div><div id="ele5"></div><div id="ele6"></div><div id="ele7"></div><div id="ele8"></div><div id="ele9"></div><div id="ele10"></div><div id="ele11"></div><div id="ele12"></div><div id="ele13"></div><div id="ele14"></div></div> 

? 번호가 동적이며 스크립트에 의해 설정되지 않기 때문에 모든 요소에 대해이 작업을 수행 할 수 있어야합니다.

답변

2

이 작동 할 수 있습니다 : 이것은 가정한다

column = Number(yourNumber) % 7 
row = Math.floor(Number(yourNumber)/7) 

당신은 0으로 시작하면 0, 1부터 시작되는 요소의 수를 알고있는 경우 첫 번째 요소 (0, 0)

+0

합니다. –

+0

ty, 귀하의 제안을 추가했습니다. 처음에는 OP 정보를 모욕하지 않도록주의를 기울였습니다 ;-) – Tom

+0

mod ('%') 연산은 항상''Math.floor'' 연산을 수행 할 필요가 없습니다. 연산은 항상 정수를 반환합니다. –

2

입니다. 당신은 당신이 방금 요소의 수는 그 위치이다 얻기 위해 7 (0에서 시작) 나눌 수 있습니다 걸쳐 7 개 요소가있을 것이라는 점을 알고있는 경우

function getRowColNoFor(elementNo) { 
    var col = elementNo % 7; 

    return { 
     col: col, 
     row: (elementNo - col)/7 
    }; 
} 
+1

+1 '객체'를 잘 사용합니다. –

+0

방금 ​​테스트 했으므로 실제로 'this.col'을 객체 내부에서 수행 할 수 없습니다. 예 :'var a = {a : 12, b : this.a + 1}', 이것은'{a : 12, b : NaN}'을 반환합니다. –

+0

나는 테이블 btw를 사용하지 않고있다 ... –

0

.. 다음 코드를 사용합니다.

요소의 수를 7로 나누면 "정수"값은 행이고 나머지는 열입니다.

그래서, 그리드의 위치를 ​​얻기 위해, 당신은이 작업을 수행 할 수 있습니다

function getPositon(index) { 
    return { 
     row: Math.floor(index/7), 
     column: index % 7 
    }; 
} 

DEMO : 당신은`Math.floor (행)`에 할 수 있습니다 http://jsfiddle.net/UVZ5f/1/

관련 문제