нажмите на конкретный c брат после того, как будет найден соответствующий текст - PullRequest
Новая
       9

нажмите на конкретный c брат после того, как будет найден соответствующий текст

1 голос
/ 27 мая 2020

У меня есть многие из нижеприведенных элементов div 'k-top' с той же внутренней структурой div, за исключением различного уникального текста в двух местах, в 'k-in' и в моем идентификаторе флажка. 

<div class="k-top">
<span class="k-icon k-i-expand"></span><-------------- trigger click on this if below text is found
<span class="k-checkbox-wrapper" role="presentation">
<input type="checkbox" tabindex="-1" id="unique TEXT99" class="k-checkbox">
<span class="k-checkbox-label checkbox-span"></span>
</span>
<span class="k-in">unique TEXT99</span></div><- if this text is found in k-in trigger click on elem above

Я хочу перебрать все мои span.k-ins, пока не найду innerText для соответствия, содержащему, например, ' unique ', а затем, как только unique будет найден, я хочу .click(); на его родственном элементе '.k-i-expand', как показано в разметке выше. Я не хочу вызывать .click(); на всех .k-i-expand только указанный c тот, у которого тот же родитель, что и мой unique text.

До сих пор я пробовал .closest, я также пробовал sibling.parent. . оба возвращают значение null или undefined .. Обратите внимание, я не использую jQuery.

Приведенное ниже работает успешно, чтобы щелкнуть все .k-i-expand, но мне нужно .click () только тот, где k-in innerText содержит «уникальный». В идеале я бы использовал начинается с или содержит, но при необходимости я бы указал все слово, например, unique TEXT99

      let exp = document.querySelectorAll('.k-i-expand'); 
        let i;
        for (i = 0; i < exp.length; ++i) {
            exp[i].click();
        };

Другие предыдущие попытки можно увидеть здесь: как запустить файл. нажмите на селектор родительского элемента elems?

Ответы [ 2 ]

1 голос
/ 27 мая 2020

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

function checkSibling(node) {
  if (node.innerHTML == "unique TEXT99") {
    return true;
  } else if (node.nextSibling) {
    return checkSibling(node.nextSibling);
  } else {
    return false;
  }
}

async function clickOnNode() {
  let exp = document.querySelectorAll(".k-i-expand");
  for await (const node of exp) {
    const hasText = await checkSibling(node);

    if (hasText) {
      console.log("Result: ", hasText);
      node.click();
    }
  }
}

clickOnNode();

Я также создал codepen с кодом, чтобы вы могли поиграть. Думаю, внутреннюю проверку HTML можно улучшить с помощью Regex.

1 голос
/ 27 мая 2020

Пробовали ли вы перебирать элементы .k-top и просматривать каждый из них, чтобы найти свой .k-in? 

const expandItemsContaining = (text) => {
  // Let's get all the .k-top divs
  const kTops = document.querySelectorAll('.k-top');

  // And peek into each and every one of them
  kTops.forEach(kTop => {
    // First we check whether there is a .k-in containing your text
    const kIn = kTop.querySelector('.k-in');
    const shouldClick = kIn && kIn.innerText && kIn.innerText.indexOf(text) !== -1;

    // And if there is one we find the .k-i-expand and click it
    if (shouldClick) {
      const kExpand = kTop.querySelector('.k-i-expand');
      if (kExpand) {
        kExpand.click();
      }
    }
  })
}
...