У меня есть такие коды:
<div id="content">
<span class="pivot">1</span>
Some pure text here
<span class="pivot">2</span>
Some pure text here
<span class="pivot">3</span>
Some pure text here
<span class="pivot">4</span>
TEXT FOR SELECTION
<span class="pivot">5</span>
Some pure text here
</div>
Моя проблема:
Кто-нибудь может мне помочь?
Вам просто нужно изменить свой HTML следующим образом:
<div id="content" onmouseup="selectText()">
<span class="pivot">1</span>
Some pure text here
<span class="pivot">2</span>
Some pure text here
<span class="pivot">3</span>
Some pure text here
<span class="pivot">4</span>
TEXT FOR SELECTION
<span class="pivot">5</span>
Some pure text here
</div>
и вам нужно написать скрипт:
function selectText(element) {
if (window.getSelection) {
var selection = window.getSelection();
if(selection.extentNode.data.trim() == "TEXT FOR SELECTION"){
var counter = 0;
var a = $('#content')[0].childNodes;
for(var i=0;i<a.length;i++){
var check=a[i];
if(check.data != undefined && check.data.trim() == "TEXT FOR SELECTION"){
break;
}
if(check.data == undefined)
counter++;
}
alert(counter);
}
}
}
Вы получите количество тегов span в предупреждении.
Каждый элемент, текст или диапазон, является дочернимNode. Поэтому, если вы получите индекс childNode, который вы выберете и вычтите 1, вы получите ответ. Однако я не уверен, есть ли способ поймать, если мышь входит в childNode.
Поэтому я думаю, что лучше всего вы окружаете все элементы с помощью span, а затем добавляете onMouseOver="getIndex(this)"
для получения индекса дочернего элемента.
function getIndex(child){
var children = document.getElementById("content").children;
for(i = 0; i < children.length; i++)
if(child == children[i])
alert("Element number " + i)
}
и контент будет похож;
<div id="content">
<span class="pivot" onmouseover="getIndex(this)">1</span>
<span onmouseover="getIndex(this)">Some pure text here</span>
<span class="pivot" onmouseover="getIndex(this)">2</span>
<span onmouseover="getIndex(this)">Some pure text here</span>
<span class="pivot" onmouseover="getIndex(this)">3</span>
<span onmouseover="getIndex(this)">Some pure text here</span>
<span class="pivot" onmouseover="getIndex(this)">4</span>
<span onmouseover="getIndex(this)">TEXT FOR SELECTION</span>
<span class="pivot" onmouseover="getIndex(this)">5</span>
<span onmouseover="getIndex(this)">Some pure text here</span>
</div>