элемент поиска содержит текст при вложенном теге <img>

Question

Мне нужно найти a (ближайший) элемент, содержащий слово «Интеграции»

const htmlStr = `
<ul class="yy">
   <li>
      <a href="/organisations/xx/team">
      <img src="xx.png" alt="Team">
      Team
      </a> 
   </li>
   <li>
      <a href="/organisations/xx/connections">
      <img src="xx.png" alt="Integrations">
      Integrations
      </a> 
   </li>
</ul>
`

Ниже приведены мои коды в Devtool

const htmlObj = document.createElement('div')
htmlObj.innerHTML = htmlStr
const elements = document.evaluate('.//*[contains(text(), "Integrations")]', htmlObj, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null)
console.log(elements.snapshotItem(0))

Я не могунайти что-нибудь как elements.snapshotItem(0) is null

Но когда я удаляю тег <img>, я могу найти <a>.Скажем, коды работают для следующей строки.

const htmlStr = `
<ul class="yy">
   <li>
      <a href="/organisations/xx/team">
      Team
      </a> 
   </li>
   <li>
      <a href="/organisations/xx/connections">
      Integrations
      </a> 
   </li>
</ul>
`

Есть идеи?Спасибо!

Answer 1

Поскольку у вас есть элемент html (img) , код будет игнорировать тег a , поскольку он не имеет строки Integrations в качестве непосредственного дочернего элемента,(код работает, если строка Integrations остается выше тег img )

См. этот код:

const htmlObj = document.createElement('div')
htmlObj.innerHTML = htmlStr
const elements = document.evaluate('.//a[contains(., "Integrations")]', htmlObj, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null)
console.log(elements.snapshotItem(0))

Как видите, я изменил '. // * [содержит ( text () , "Интеграция")]' на '. // a [содержит(. , «Интеграция»)] '

Когда вы используете text () , это означает, что вы ищете ближайшего ребенка текстовый узел равен 'Интеграциям'.

, но, если вы используете . , это означает, что вы ищете строку Integration at любая позиция , и поэтому приведенный выше код работает, даже если строка Integration находится ниже img (или любой) html-тега.

ps: Мой английский находится в стадии разработки.Если вы ничего не поняли из того, что я говорю, спросите меня, и я постараюсь объяснить это снова.

Answer 2

Пожалуйста, измените тег изображения, чтобы он не заканчивался, поэтому эта проблема создана .. !!

<ul class="yy">
       <li>
          <a href="/organisations/xx/team">
          <img src="xx.png" alt="Team"/>
          Team
          </a> 
       </li>
       <li>
          <a href="/organisations/xx/connections">
          <img src="xx.png" alt="Integrations"/>
          Integrations
          </a> 
       </li>
    </ul>
    `