Как выбрать элемент по тексту?

194
20 декабря 2018, 22:40

Внутри div есть label с текстом. Надо выбрать этот div. Для этого надо сначала выбрать label. Как это сделать?

Answer 1

Т.к. консорциум не хочет связываться с "числом зверя", то только через JS:

// Если без украшательств, то должно выглядеть так: 
function fGetParentForLabel(sTxt) { 
  // С помощью XPath, находим в документе тег <label> содержащий заданный текст 
  let result = document.evaluate('//label[contains(., "' + sTxt + '")]', document.documentElement, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null); 
  // Если такой элемент найден, тогда... 
  if (result.snapshotLength) { 
    // Собственно, получаем нужный parent-элемент с помощью 'closest()' 
    // (если найдено несколько совпадений, то берём только первое (0-based)) 
    return result.snapshotItem(0).closest('.label-list'); 
  } 
} 
 
// Пример работы XPath 
window.onload = function() { 
  document.querySelector('.input-text').addEventListener('input', function() { 
    let result = document.evaluate('//label[contains(., "")]', document.documentElement, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null); 
    for (let i = 0; i < result.snapshotLength; i++) { 
      result.snapshotItem(i).style.background = ''; 
    } 
    if (this.value) { 
      // С помощью XPath, находим все <label> содержащие заданный текст 
      let result = document.evaluate('//label[contains(., "' + this.value + '")]', document.documentElement, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null); 
      // Если такие элементы найдены, тогда... 
      if (result.snapshotLength) { 
        // Перебираем найденное 
        for (let i = 0; i < result.snapshotLength; i++) { 
          // Подсвечиваем нужный <label> 
          result.snapshotItem(i).style.background = '#f99'; 
        } 
      } 
    } 
  }); 
  console.log(fGetParentForLabel('оже la')); 
}
.input-text { 
  width: 300px; 
} 
 
.label-list { 
  width: 300px; 
  border: 1px solid #ccc; 
  padding: 2px; 
}
<input class="input-text" placeholder="Введите текст содержащийся в искомом <label>"><br> 
<br> 
<div class="label-list"> 
  <label>Это первый label</label><br> 
  <label>Вот второй label</label><br> 
  <label>Это средний label</label><br> 
  <label>Это тоже label</label><br> 
  <label>А это сааамый последний label</label> 
</div>

READ ALSO
Помогите реализовать градиент через css

Помогите реализовать градиент через css

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

252
SVG Покадровая анимация svg картинок

SVG Покадровая анимация svg картинок

Как реализовать покадровую анимацию создаваемую из svg path? То есть у меня есть, к примеру, 28 раскадрованых путей, и мне их надо показывать на экране...

196
Можно ли поставить иконки рядом с элементами &ldquo;li&rdquo;, используя псевдоэлемент &ldquo;before&rdquo;?

Можно ли поставить иконки рядом с элементами “li”, используя псевдоэлемент “before”?

Можно ли поставить иконки рядом с элементами "li", используя псевдоэлемент "before"? content: url(imagejpg) помогает? но иконки огромные, а поменять никак...

210