2011-12-18 6 views
2

Есть ли какой-либо плагин в firefox или функция в firebug или что-то еще, что позволяет мне указать номер позиции определенного элемента?Как я могу получить номер позиции элемента?

Если я, например, хочу знать, в какой позиции находится определенный элемент TD по сравнению со всеми TD в документе.

Пример:

<html> 
<head> 
<body> 
<table> 
<tr> 
<td></td> (0) 
<td></td> (1) 
<td></td> (2) 
<td></td> (3) 
<td></td> (And so on...) 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> <------ WHAT IS THE POSITION NUMBER OF THIS TD? 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
</tr> 
</table> 
</body> 
</html> 

Example

Панель WebDeveloper в Firefox есть инструмент, который позволяет увидеть порядковый номер всех DIV-х годов. Это то, что мне нужно, но для других элементов, а не только для DIV. Web developer toolbar

PS. Я был вдохновлен правильный ответ и я сделал свое собственное решение:

var dom = document.getElementsByTagName('td'); 
var x; 
for(x = 0; x < dom.length; x++) 
{ 
    dom[x].innerHTML = dom[x].nodeName + '[' + x + '] ' + '(' + dom[x].innerHTML + ')'; 
    dom[x].style.color = 'blue'; 
} 
+0

с JQuery: '$ ('тд') .index (yourTD)' или '$ (yourTD) .index ('тд')' –

ответ

2

Ну, следующий будет делать, как вам нужно:

$('li').each(

function(i) { 
    $(this).text('list element ' + i); 
}); 

function indexAmongSiblings(elem) { 
    if (!elem) { 
     return false; 
    } 
    var that = elem; 
    var parent = that.parentNode; 
    var siblings = parent.childNodes; 
    var elemSiblings = []; 
    for (var s = 0, numberOf = siblings.length; s < numberOf; s++) { 
     if (siblings[s].nodeName != '#text' && siblings[s].tagName != undefined) { 
      elemSiblings.push(siblings[s]); 
     } 
    } 
    for (var e=0,l=elemSiblings.length; e<l; e++){ 
     if (elemSiblings[e] == elem){ 
      console.log('Element number: ' + e + ' among its siblings.'); 
     } 
    } 
} 

var elements = document.getElementsByTagName('*'); 

for (var i = 0, len = elements.length; i < len; i++) { 
    elements[i].onclick = function(e) { 
     e.stopPropagation(); 
     indexAmongSiblings(this); 
    }; 
} 

JS Fiddle demo.


Edited выше для того, чтобы показать, как присвоить индекс элемента, среди своих братьев и сестер, к переменной:

$('li').each(

function(i) { 
    $(this).text('list element ' + i); 
}); 

function indexAmongSiblings(elem) { 
    if (!elem) { 
     return false; 
    } 
    var that = elem; 
    var parent = that.parentNode; 
    var siblings = parent.childNodes; 
    var elemSiblings = []; 
    for (var s = 0, numberOf = siblings.length; s < numberOf; s++) { 
     if (siblings[s].nodeName != '#text' && siblings[s].tagName != undefined) { 
      elemSiblings.push(siblings[s]); 
     } 
    } 
    for (var e=0,l=elemSiblings.length; e<l; e++){ 
     if (elemSiblings[e] == elem){ 
      // the following returns the index-point amongst siblings 
      return e; 
     } 
    } 
} 

var elements = document.getElementsByTagName('*'); 

for (var i = 0, len = elements.length; i < len; i++) { 
    elements[i].onclick = function(e) { 
     e.stopPropagation(); 
     var thisIndex = indexAmongSiblings(this); 
     // the thisIndex variable now holds the returned index-point 
    }; 
} 

Edited в ответ на комментарии, оставленные на другие ответы, ОП:

Я хочу номер/последовательности определенного элемента (например,) по сравнению с равными элементами (например,) во всей DOM.

Citation.

Следующая функция получит, и возвращение, позиция индекс щелкнули элемента среди других тегов одного и того же типа в документе (который на самом деле несколько легче, чем выше):

function indexAmongSameTags(elem) { 
    if (!elem || !elem.tagName) { 
     return false; 
    } 

    var thisIs = elem.tagName.toLowerCase(), 
     sameAs = document.getElementsByTagName(thisIs); 

    for (var i=0,len=sameAs.length; i<len; i++){ 
     if (sameAs[i] == elem){ 
      console.log('You clicked ' + thisIs + ' of index position "' + i + '" among ' + len + ' other ' + thisIs + ' elements'); 
      return i; 
     } 
    } 

} 

var elements = document.getElementsByTagName('*'); 

for (var i = 0, len = elements.length; i < len; i++) { 
    elements[i].onclick = function(e) { 
     e.stopPropagation(); 
     var indexPosition = indexAmongSameTags(this); 
     console.log(indexPosition); 
    }; 
} 

JS Fiddle demo.

Ссылки:

+0

AAaaaawwwww Yeeeaahhh! Работает отлично :-) Просто вставьте его в консоль firebug, и он работает, приятно. Поскольку для работы нет встроенного инструмента, я буду использовать этот скрипт, спасибо! :-) –

+0

Вы абсолютно приветствуетесь; рад помочь! знак равно –

1

EDIT

К сожалению, я не понял ваш вопрос. Вот ответ, то:

  1. Откроет поджигатель
  2. Выберите элемент с инспектировать инструмент
  3. После того, как вы нажали, одной правой сторона нажмите на ссылку Dóm
  4. См индекса ячейки там.

Как это:

enter image description here


С помощью JavaScript вы можете получить номера ТДС.

var tds = document.getElementsByTagName('td'); // this will return every td in the document. 
if (console && console.log) 
    console.log(tds.length); 
else 
    alert(tds.length); 

В приведенном выше примере напечатано тотальное количество элементов td в документе. Однако, если вам нужен конкретный td, вы должны указать td идентификатор. Например предположим, что ваш HTML-файл, как:

... 
<td id="your_td"></td> 
... 

Теперь С помощью JavaScript вы можете:

var td = document.getElementById('your_td'); // this will return the td 
// if you want its position you can: 
var tds = document.getElementsByTagName('td'); 
for (var i = 0; i < tds.length; i++) { 

    if (tds[i] === td) 
     alert(i); 

} 

Этот пример даст положение вашей ТД.

+0

Благодаря ваш код работает, но я ищу инструмент или плагин что позволяет быстро нажимать на элемент, и он укажет мне номер позиции конкретного элемента. Может быть, немного похоже на инструмент контрольного элемента firebug. –

+0

@ user977150, хорошо Я редактировал Ответ на этот вопрос –

+0

Спасибо, но все-таки не то, что я ищу ... Позвольте мне уточнить: Я хочу позицию/номер последовательности конкретного элемента (например, ) по сравнению с равные элементы (например, ) во всем DOM. Я не хочу, чтобы число элементов сравнивалось с теми же элементами внутри их родителя, как ваш пример с индексом ячейки. Надеюсь, что это поможет :-) –

1

Дом-дерево. Каждый элемент имеет номер, если вы попытаетесь получить его по XPath.

+0

Это не работает, например: /html/body/form/div [2]/div [2]/div/div [3]/div/div [2]/div/div/div/div/div [2]/div/table/tbody/tr [5]/td [2] Это xpath firebug дает мне определенный элемент td, но мне нужно знать, какое число, которое TD сравнило со всеми TD в DOM. –

Смежные вопросы