컨테이너 div의 컨텍스트에서 스팬의 문자 좌표를 가져옵니다

다음은 javascript/jquery를 사용하여 두 번째 범위에있는 단어 "표준"좌표를 원할 때의 예입니다.컨테이너 div의 컨텍스트에서 스팬의 문자 좌표를 가져옵니다

HTML :

<div class="container"> 
     <span>Some text is here</span> 
     <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span> 
     <span>Some text is here too.</span> 
     <span>Some text is here too.</span> 
     <span>Some text is here too.</span> 
     <span>Some text is here too.</span> 
    </div>

CSS :

.container{ 
    position: relative; 
    padding: 100px; 
} 
span{ 
    position:relative; 
    float:left; 
    padding:10px; 
}

http://jsfiddle.net/P7rs4/1/

출처

2014-07-24 user3624983

'좌표'란 무엇을 의미합니까? 이 예에서 '표준'이라는 단어에 대해 필요한 결과는 무엇입니까? –

예, x와 y 좌표는 – user3624983

입니다. "표준"은 제가 제시 한 예입니다. 스팬에있는 특정 단어의 왼쪽, 위쪽 (x, y) 위치를 알고 싶습니다. – user3624983

단어의 좌표를 얻으려면, 그것은 첫 번째 요소에 싸여해야

$('.container').html(function(_, html) { 
    return html.replace('standard', '<span class="standard">standard</span>'); 
});

티 암탉 당신은 position()

var position = $('.standard').offset();

FIDDLE

출처

2014-07-24 11:39:40 adeneo

이것이 해결책이라고 생각하지만 스팬을 추가하는 것이 내가 선호하지 않는 것입니다. 다른 방법으로이 작업을 수행 할 수 있습니까? – user3624983

나는 그것이 없다면, 단어가 단지 좌표를 찾을 필요가있는 속성을 가지고 있지 않은'textNode' 일 것이라고 생각한다. –

아마도 textNode 좌표를 얻을 수는 있지만 textNode에는 그 단어 이상이 포함될 것이므로 정확하지 않을 수 있습니다. 스팬 내에 포장하는 것이 훨씬 쉽습니다. – adeneo

죄송 편집과 부모 요소에 해당 요소의 문서를 기준으로, 또는 상대의 offset() 위치를 얻는다.

기본적으로 모든 요소가 텍스트 표준으로 제공되므로 두 개 이상일 수 있습니다. 그래서 실제 사례 솔루션은 결과를 반복 한 다음 위치를 얻는 것입니다.

출처

2014-07-24 11:40:38 peterpeterson

, 나는 그것을 원하지 않아. 특정 단어의 위치를 원합니다 – user3624983

내 응답을 편집했습니다 – peterpeterson

바이올린으로 할 수 있습니까? – user3624983

컨테이너 div의 컨텍스트에서 스팬의 문자 좌표를 가져옵니다

답변

관련 문제