Count элемент до тех пор, пока смещение

Question

У меня есть некоторые коды, как, что:

<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> 

Моя проблема:

• Я выбираю текст "TEXT ДЛЯ ВЫБОРА" с помощью мыши
• Я хочу подсчитать, сколько диапазон класса PIVOT до ТЕКСТА ДЛЯ ВЫБОРА

Кто-то может мне помочь?

Answer 1

Вам просто нужно изменить ваш 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); 
      }   
     } 
    } 

вы получите число пролетных тегов в боевой готовности.

Answer 2

Каждый элемент, текст или интервал, является дочернимNode. Поэтому, если вы получите индекс childNode, который вы выберете и вычтите 1, вы получите ответ. Однако я не уверен, есть ли способ поймать, если мышь входит в childNode.

Так что я думаю, что лучше всего вы окружаете все свои элементы с помощью диапазона, а затем добавьте 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>