jQuery Получить положение персонажа в Div?

Question

Привет, ребята [и девочки]:)

Просто интересно, можно ли получить absolute позицию персонажа внутри div?

<div class="mycooldiv">
    bunch of text is in here and for example some # and some other cool #
</div>

, то есть используя jQuery UI Positionвозможно или иначе - как бы я получить, например, позицию #?

Answer 1

Если ваш элемент содержит только текст, вы можете заключить символ во встроенный элемент и получить положение элемента, используя .offset(). Затем поместите исходный текст обратно. Скрипка: http://jsfiddle.net/Dp6JR/

var $elem = $('.mycooldiv');
var text = $elem.html();
var newText = text.replace(/#/, '<span class="get-position-of-it"></span>');
$elem.html(newText); //Set wrapper
var offset = $(".get-position-of-it").offset();
$elem.html(text)    ; //Place back
var topPos = offset.top;
var left = offset.left;

Примечание: эта функция получает позицию первого найденного # символа. Если вы хотите получить положение всех символов, добавьте g к регулярному выражению (/#/g).

Получение всех позиций - Скрипка: http://jsfiddle.net/Dp6JR/1/

Смещения всех символов будут сохранены в двумерном массиве (матрице).

var positions = [];
var $elem = $('.mycooldiv');
var text = $elem.html();
var newText = text.replace(/#/g, '<span class="get-position-of-it"></span>');
$elem.html(newText); //Set wrapper
$(".get-position-of-it").each(function(){
    var offset = $(this).offset();
    positions.push([offset.left, offset.top]);
});
$elem.html(text)    ; //Place back
//`positions` is an array of all offset information

Вывод может быть эквивалентен:

var positions = [
    [0, 0],
    [100, 0]
];

Answer 2

Вы можете использовать плагин lettering.js, который переносит буквы ( или слова или строки ) в элементы span.

Таким образом, вы можете легко нацелиться на них и использовать .position() на этих элементах, чтобы получить их фактическое местоположение в контейнере (, который должен иметь position:relative) ..

Демо на http://jsfiddle.net/gaby/G7hFB/

Answer 3

Что вы подразумеваете под позицией?Положение в текстовой строке или координаты (x, y) в пределах его контейнера?

Если в первом случае вы можете использовать метод .idexOf(), во втором случае я оберну этот элементв теге span, а затем получить его позицию.