jQuery найти индекс <p>НЕ относительно родителя, не работающего для XML

Question

В моем HTML 2-й <p> активен.

Индекс относительно его родителя 2. Давайте назовем это global-Index.

<div>
  <h1>TITLE (global-Index: 0; p-Index: N/A)</h1>
  <p class="">1st P (global-Index: 1; p-Index: 0)</p>
  <p class="active">2nd P (global-Index: 2; p-Index: 1)</p>
  <p class="">3rd P (global-Index: 3; p-Index: 2)</p>
</div>

Моя цель состояла в том, чтобы сделать это Index 1. Я хотел положение относительно всех <p> элементов. Давайте назовем это p-Index.

Я мог бы успешно получить p-Index в DOM с элементом, который имеет класс.

ПРОБЛЕМА: Я не могу получить p-Index с XML элемент с атрибутом.

 <DIV>
   <H1>TITLE (global-Index: 0; p-Index: N/A)</H1>
   <P active="0">1st P (global-Index: 1; p-Index: 0)</P>
   <P active="1">2nd P (global-Index: 2; p-Index: 1)</P>
   <P active="0">3rd P (global-Index: 3; p-Index: 2)</P>
 </DIV>

/**
 * HTML section
 */

// Find Index of <p> with class="active"
var activeElement = $('div p.active');

var activeIndex = activeElement.index('p')// restricts the index only to 'p' elements.

console.log("HTML Element " + activeElement.prop("tagName") + " '" + activeElement.text() + "'" + ' has Index ' + activeIndex)



/**
 * XML section
 */

// Create XML
var xml = '<DIV><H1>TITLE (global-Index: 0; p-Index: N/A)</H1><P active="0">1st P (global-Index: 1; p-Index: 0)</P><P active="1">2nd P (global-Index: 2; p-Index: 1)</P><P active="0">3rd P (global-Index: 3; p-Index: 2)</P></DIV>';

// Parse XML
xmlDoc = $.parseXML(xml),
  $xml = $(xmlDoc);

// Find Index of <P> with attribute active="1"
$($xml).each(function() {

  var activeElement = $(this).find('DIV P[active="1"]')

  var activeIndex = activeElement.index('P')// unlike in HTML,'P' does not work here!

  console.log("XML Element " + activeElement.prop("tagName") + " '" + activeElement.text() + "'" + ' has Index ' + activeIndex)

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <h1>TITLE (global-Index: 0; p-Index: N/A)</h1>
  <p class="">1st P (global-Index: 1; p-Index: 0)</p>
  <p class="active">2nd P (global-Index: 2; p-Index: 1)</p>
  <p class="">3rd P (global-Index: 3; p-Index: 2)</p>
</div>

В разделе XML селектор 'P' для index() приводит к -1, то есть элемент не найден.

Пропуск селектора дает мне global-Index 2, что правильно, но не то, что я хочу.

jsFiddle

Answer 1

У вашего подхода есть две проблемы.

Во-первых, в ваших html и xml вы не ищете одно и то же:

В вашем html вы находитесь ищет 'div p.active', что означает узел <p>, который имеет атрибут class (.), у которого атрибут имеет значение атрибута "active", и все это внутри узла <div>.

В вашем xml, с другой стороны, вы ищете DIV P[active="1"]. Это означает, что вы ищете узел <P>, который имеет ([ ]) атрибут с именем active, который имеет значение атрибута "1", и все это внутри узла <DIV>.

Хотя оба выглядят одинаково, они определенно не похожи, и использование «активных» в обоих случаях только добавляет путаницы. В html «active» - это значение атрибута, а в xml - это само имя атрибута.

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

Поэтому попробуйте изменить:

var activeElement = $('div p.active');
var activeIndex = activeElement.index('p')

на

var activeElement = $( "div p[class='active']" );
var activeIndex = $( "p[class]" ).index( activeElement )

и

 var activeElement = $(this).find('DIV P[active="1"]')
 var activeIndex = activeElement.index('P')

в

var activeElement = $( "DIV P[active='1']" );
var activeIndex = $( "P[active]").index( activeElement )

и оба вернутся 1.

Редактировать:

Я запустил это в браузере следующим образом:

$(document).each(function() {
var activeElement = $( "DIV P[active='1']" );
var activeIndex = $( "P[active]").index( activeElement )
  document.write("XML Element " + activeElement.prop("tagName") + " '" + activeElement.text() + "'" + ' has Index ' + activeIndex)
});

Вывод:

XML Element P 'bar' has Index 1