2014-04-03 5 views
0

JSON 파일에서 데이터를 가져 와서 HTML 페이지를 만듭니다. 이것은 잘 작동하며 우리는 jQuery Mobile을 사용하여 정보가 포함 된 접을 수있는 목록을 동적으로 생성합니다.왜 HTML div/jQuery 객체의 속성에 액세스 할 수 없습니까?

이제 우리는 다른 페이지에서 직접 링크 할 수 있도록 각 데이터 비트의 오프셋 속성을 얻으려고합니다.

문제는 오프셋 값을 유지할 수 없다는 것입니다. 이 코드를 사용 :

div.0: listofproperties 

그래서 내가

을 시도 :

var entry = $("#" + glosID); 
    console.log(entry); 
    var offsetJS = entry.offsetTop; 
    var offsetJQ = entry.offset().top; 
    console.log("Offset from top(JS): " + offsetJS); 
    console.log("Offset from top(jQuery): " + offsetJQ); 

출력은

Offset from top(JS): undefined 
Offset from top(jQuery): 0 

을 나는 콘솔에서 개체를 검사하는 것은이 구조를 가지고 있음을 보여줍니다 나타났습니다

var offsetJS = entry[0].offsetTop; 
var offsetJQ = entry[0].offset().top; 

이제 다음과 같이 표시됩니다.

var offsetJS = entry[0].offsetTop; 
    var offsetJQ = entry[0].draggable; 

지금이 흥미 롭다 :

Uncaught TypeError: Object #<HTMLDivElement> has no method 'offset' 

마지막으로 나는이 시도했다. 내가 찾은 첫 번째 쉬운 속성이기 때문에 나는 "draggable"을 선택했습니다. 나는 내가 발견 한 많은 사람들과 이것을 시험해 보았고 그들은 모두 일했다. 이 코드를 통해 내가 얻을 : 나는 명확하게 배열의 첫 번째 객체에 접근하고있어로 [0] 통지 (예를 들어, 이름 공간 URI)를 사용하여 다른 속성의

Offset from top(JS): 0 
Offset from top(jQuery): false 

내가 테스트 한 많은. 그러나 내가 오프셋이나 오프셋과 관련된 다른 속성 (offsetHeight 등)을 가질 수 없으므로 시도해보십시오. 그러나 nodeType과 같은 다른 숫자를 얻을 수 있습니다.

여기에 무슨 일이 일어나고 있습니까? jQuery 모바일이 사물을 엉망으로 만들고 있습니까?

+0

jQuery 객체와 DOM 요소의 차이점을 알고 계십니까? – epascarello

+0

해당 요소가 _collapsible_ 안에 있고 _collapsed_이면 offset(). top은 숨겨져 있기 때문에 '0'을 반환합니다. 이 [demo] (http://jsfiddle.net/Palestinian/tXg7x/)에서 아래로 스크롤하여 빨간색 테두리가있는 단어를 클릭하십시오. – Omar

+0

요소가 접을 수 있음에 있지 않습니다. 축소 가능을 열기 위해 클릭하는 접을 수있는 제목 텍스트입니다. –

답변

0

jQuery 인스턴스와 DOM 객체는 서로 다릅니다. $("#" + glosID)은 jQuery 인스턴스를 제공하며,이 인스턴스는 offset 메서드를가집니다. 은 속성을 가진 DOM 요소 (id과 일치하는 것이 제공된 경우)를 포함합니다. 그래서 :

var entry = $("#" + glosID); 
var offsetJS = entry[0].offsetTop; // Note the [0], to get the contained DOM element 
var offsetJQ = entry.offset().top; // No [0] on this one, we're using the jQuery instance 
console.log("Offset from top(JS): " + offsetJS); 
console.log("Offset from top(jQuery): " + offsetJQ); 

jQuery를 인스턴스 래퍼는 주변 세트 DOM 요소의 (물론, 일반적으로 DOM 요소;의 jQuery 객체가 다른 것들 래퍼 일부 가장자리 경우가 있습니다). jQuery 인스턴스에는 0 개 이상의 DOM 요소가 포함될 수 있습니다. jQuery 객체에서 DOM 요소에 액세스해야하는 경우 괄호로 묶은 표기법과 0 기반 색인을 사용하여 수행 할 수 있습니다 (첫 번째 포함 된 요소는 [0]이고 두 번째 요소는 [1] 등). JQuery와 인스턴스가 비어 있지 않은 경우 jQuery를 인스턴스의

은 "게터"기능 (offset()를 등) 세트의 첫번째 요소에서 정보를 얻을 것이다 (세트가 비어있는 경우 그들은 일반적으로 undefined을 반환). 반대로 "setter"메서드는 의 값을 모두 요소 집합에 설정합니다.)

+0

그러면 어떻게 오프셋 값을 얻을 수 있습니까? offset(). top을 사용하여 첫 번째 요소 (필요한 부분)의 값을 얻으면 0이됩니다.이 값은 콘솔에서 값을 볼 수 있으므로 올바르지 않습니다. –

+0

@SubjectiveEffect :'$ (...). offset(). top'은 문서에 상대적인, 세트에서 첫 번째로 일치하는 요소의 오프셋을 제공합니다. 이는 offset 상위 (문서가 아닌)를 기준으로 한 offsetTop과 동일하지 않습니다. jQuery의 그것과 동일한 것은'.position(). top'입니다. –

+0

첫 번째 코드 예제에서 볼 수 있듯이 이것은 작동하지 않으며 단지 0을 제공합니다. –

관련 문제