Как я могу получить номер позиции элемента? - PullRequest
Новая
       51

Как я могу получить номер позиции элемента?

2 голосов
/ 19 декабря 2011

Есть ли в 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

Панель инструментов веб-разработчика в 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';
}

Ответы [ 3 ]

2 голосов
/ 19 декабря 2011

Хорошо, следующее будет работать так, как вам нужно: 

$('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 .

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

$('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
    };
}

Отредактировано в ответ на комментарии, оставленные к другим ответам, с помощью OP:

Я хочу, чтобы номер / последовательность позиции определенного элемента (например) сравнивалась с равными элементами (например) во всем 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 .

Ссылки:

1 голос
/ 19 декабря 2011

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

1 голос
/ 19 декабря 2011

EDIT

Извините, я неправильно понял ваш вопрос. Вот ответ тогда:

  1. Открой свой клоп-пожарник
  2. Выберите ваш элемент с помощью инструмента проверки
  3. Как только вы нажали, щелкните правой кнопкой мыши по ссылке dom
  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 в вашем документе. Однако, если вы хотите определенный тд, вы должны дать этому тд идентификатор. Например, предположим, что ваш 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);

}

Этот пример даст позицию вашего тд.

...