Форум

aiaks · #1 (**permalink**) 11.09.2012, 11:39

Добрый день =)

Такая проблема, есть пользовательское выделение, необходимо просмотреть всех родителей этого выделения и получить их id.

function selection_parents(){
var empty = new Array()
$target=$(window.getSelection().getRangeAt(0).startContainer.parentNode)
var range = window.getSelection().getRangeAt(0);
for (i=0;i<$target.parents().length;i++)
{
empty[i]=$target.parents()[i].tagName
var $currentobject = $($target).parents()[i];
alert($currentobject.attr("id")) // выводит пустой alert, хотя id у тегов есть.
}
}

vashurin · #2 (**permalink**) 11.09.2012, 14:12

Сообщение от aiaks

Добрый день =)

Такая проблема, есть пользовательское выделение, необходимо просмотреть всех родителей этого выделения и получить их id.

function selection_parents(){
var empty = new Array()
$target=$(window.getSelection().getRangeAt(0).startContainer.parentNode)
var range = window.getSelection().getRangeAt(0);
for (i=0;i<$target.parents().length;i++)
{
empty[i]=$target.parents()[i].tagName
var $currentobject = $($target).parents()[i];
alert($currentobject.attr("id")) // выводит пустой alert, хотя id у тегов есть.
}
}

Не знаю, как у вас вызывается selection_parents и сколько можно выделить одновременно, но получение всех родителей можно сделать проще:

<html id="id-1">
<head>
    <style type="text/css">
        #id5 {
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body id="id0">
<div id="id1">
    <div id="id2">
        <div id="id3">
            <div id="id4">
                <div id="id5"></div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    document.getElementById('id5').onclick = function () {
        var parent = this.parentNode;
        var arr = new Array();
        arr.push(parent);
        while (parent.nodeName != 'HTML') {
            parent = parent.parentNode;
            arr.push(parent);
        }
        for (var i = 0; i < arr.length; i++)  alert('nodeName=' + arr[i].nodeName + '\nid=' + arr[i].id);
    }
</script>
</body>
</html>

aiaks · #3 (**permalink**) 11.09.2012, 15:37

Спасибо за ответ, Ваш вариант действительно предпочтительнее.
Единственный оставшийся вопрос это как с помощью:

var range = window.getSelection().getRangeAt(0);

Получить такой же объект как:

document.getElementById('id5')

Всё остальное понятно.

bes · #4 (**permalink**) 11.09.2012, 15:54

https://developer.mozilla.org/en-US/docs/DOM/Selection
http://www.w3.org/TR/DOM-Level-2-Tra...ge/ranges.html
может здесь чего можно накопать

первый и последний объект в выделении получить можно

<body id="id0">div
<div id="id1">div
    <div id="id2">div
        <div id="id3">div
            <div id="id4">div
                <div id="id5">div</div>
            </div>
        </div>
    </div>
</div>

<script>
document.body.onmouseup = function () {
	var mas = [];
	mas.push(document.getSelection().anchorNode.parentNode.getAttribute('id'));
	mas.push(document.getSelection().focusNode.parentNode.getAttribute('id'));
	alert(mas)
}
</script>

aiaks · #5 (**permalink**) 11.09.2012, 16:27

Всё получилось =)
Спасибо!

bes · #6 (**permalink**) 11.09.2012, 16:35

Сообщение от aiaks

Всё получилось =)

а выложить результат, первый и последний - это ещё не все,
я лично не понял как получить их все (на сегодня уже зае-ся переводить с английского

)

UPD: структура может быть разной, поэтому для произвольного выделения получение первого и последнего ещё не говорит о том, что там между ними, в общем я пока не понял как получить массив их всех

Форум

Справочник

Discord чат

Курсы javascript