Как извлечь из списка с несколькими уровнями вложенности нужный элемент при условии что на первом уровне значение элемента совпадает с определенным?

160

15 апреля 2019, 18:10

Как при клике на кнопку обойти весь список, найти в этом списке тот элемент у которого текст совпадает со значением в кнопке?

Если совпадение найдено, то извлечь у найденного элемента всех потомков li, 1, 2 или 3 уровня? При клике на кнопку я обхожу список и ищу у кго из родителей есть совпадения со значением в кнопке, если нашел, мне нужно извлечь текст например

28-44##15##4##15##4##5##25##40##450##500##gyps##1350 28-

$('.opr').click(function() { 
  var opr = $(this).val(); 
  $('.calc_haracteristics>ul>li').each(function(i, kvart) { 
    if ($(kvart).children('span').text() == opr) { 
      console.log('Объект найден'); 
      //но как добраться сюда 28-44##15##4##15##4##5##25##40##450##500##gyps##1350....? 
    } 
  }) 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
Определенное значние: <input class="opr" type="button" value="Однокомнатная квартира"> 
<div class="calc_haracteristics"> 
  <ul> 
    <li><span>Однокомнатная квартира</span> 
      <ul> 
        <li><span>IP-розетка интернет</span> 
          <ul> 
            <li><span>IP-розетка</span> 
              <ul> 
                <li> 
                  28-44##15##4##15##4##5##25##40##80##90##monolit##260 </li> 
                <li> 
                  28-44##15##4##15##4##5##25##40##80##90##brick##200 </li> 
                <li> 
                  28-44##15##4##15##4##5##25##40##80##90##gyps##140 </li> 
              </ul> 
            </li> 
          </ul> 
        </li> 
        <li><span>Электрощиток</span> 
          <ul> 
            <li><span>Монтаж встраиваемого щита до 24 модулей</span> 
              <ul> 
                <li> 
                  28-44##15##4##15##4##5##25##40##450##500##gyps##1350 </li> 
                <li> 
                  28-44##15##4##15##4##5##25##40##450##500##monolit##3000 </li> 
                <li> 
                  28-44##15##4##15##4##5##25##40##450##500##brick##1950 </li> 
              </ul> 
            </li> 
            <li><span>Монтаж встраиваемого щита до 72 модулей</span> 
              <ul> 
                <li> 
                  28-44##15##4##15##4##5##25##40##450##500##brick##6500 </li> 
                <li> 
                  28-44##15##4##15##4##5##25##40##450##500##gyps##4500 </li> 
                <li> 
                  28-44##15##4##15##4##5##25##40##450##500##monolit##10000 </li> 
              </ul> 
            </li> 
            <li><span>Монтаж встраиваемого щита до 36 модулей</span> 
              <ul> 
                <li> 
                  28-44##15##4##15##4##5##25##40##450##500##monolit##4000 </li> 
                <li> 
                  28-44##15##4##15##4##5##25##40##450##500##brick##2600 </li> 
                <li> 
                  28-44##15##4##15##4##5##25##40##450##500##gyps##1800 </li> 
              </ul> 
            </li> 
            <li><span>Монтаж встраиваемого щита до 12 модулей</span> 
              <ul> 
                <li> 
                  28-44##15##4##15##4##5##25##40##450##500##monolit##2400 </li> 
                <li> 
                  28-44##15##4##15##4##5##25##40##450##500##brick##1560 </li> 
                <li> 
                  28-44##15##4##15##4##5##25##40##450##500##gyps##1080 </li> 
              </ul> 
            </li> 
            <li><span>Монтаж встраиваемого щита до 48 модулей</span> 
              <ul> 
                <li> 
                  28-44##15##4##15##4##5##25##40##450##500##monolit##6000 </li> 
                <li> 
                  28-44##15##4##15##4##5##25##40##450##500##brick##3900 </li> 
                <li> 
                  28-44##15##4##15##4##5##25##40##450##500##gyps##2700 </li> 
              </ul> 
            </li> 
          </ul> 
        </li> 
        <li><span>Выключатель</span> 
          <ul> 
            <li><span>Выключатель</span> 
              <ul> 
                <li> 
                  28-44##15##4##15##4##5##25##40##155##161##brick##190 </li> 
                <li> 
                  28-44##15##4##15##4##5##25##40##155##161##gyps##130 </li> 
                <li> 
                  28-44##15##4##15##4##5##25##40##155##161##monolit##250 </li> 
              </ul> 
            </li> 
          </ul> 
        </li> 
        <li><span>Люстра</span> 
          <ul> 
            <li><span>Люстра</span> 
              <ul> 
                <li> 
                  28-44##15##4##15##4##5##25##40##2300##2800####400 </li> 
              </ul> 
            </li> 
          </ul> 
        </li> 
        <li><span>Розетки внутренние с/з</span> 
          <ul> 
            <li><span>Розетка</span> 
              <ul> 
                <li> 
                  28-44##15##4##15##4##5##25##40##95##105##monolit##260 </li> 
              </ul> 
            </li> 
            <li><span></span> 
              <ul> 
                <li> 
                  28-44##15##4##15##4##5##25##40##95##105##brick##200 </li> 
                <li> 
                  28-44##15##4##15##4##5##25##40##95##105##gyps##140 </li> 
              </ul> 
            </li> 
          </ul> 
        </li> 
        <li><span>Точечный светильник</span> 
          <ul> 
            <li><span>Точечный светильник</span> 
              <ul> 
                <li> 
                  28-44##15##4##15##4##5##25##40##120##140####190 </li> 
              </ul> 
            </li> 
          </ul> 
        </li> 
        <li><span>ТВ-розетка</span> 
          <ul> 
            <li><span>ТВ розетка</span> 
              <ul> 
                <li> 
                  28-44##15##4##15##4##5##25##40####161##monolit##260 </li> 
                <li> 
                  28-44##15##4##15##4##5##25##40####161##brick##200 </li> 
                <li> 
                  28-44##15##4##15##4##5##25##40####161##gyps##140 </li> 
              </ul> 
            </li> 
          </ul> 
        </li> 
      </ul> 
    </li> 
    <li><span>Двухкомнатная квартира</span> 
      <ul> 
        <li><span></span> 
          <ul> 
            <li> 
            </li> 
          </ul> 
        </li> 
      </ul> 
    </li> 
    <li><span>Трехкомнатная квартира</span> 
      <ul> 
        <li><span></span> 
          <ul> 
            <li> 
            </li> 
          </ul> 
        </li> 
      </ul> 
    </li> 
    <li><span>Четырехкомнатная квартира</span> 
      <ul> 
        <li><span></span> 
          <ul> 
            <li> 
            </li> 
          </ul> 
        </li> 
      </ul> 
    </li> 
  </ul> 
</div>

пробовал так

$(kvart, ul>li>ul>li>ul>li).text() но это какая то фигня, не то.. с помощью children пробовал добавлять но пусто, может быть есть короткий способ, то есть указать переменную kvart и сказать найди мне элемент 'ul>li>ul>li>ul>li'?

нужен способ чтобы осталась переменная kvart от которой я уже смогу углубляться. но вот как от нее идти не пойму.. (уровень вложености меняться не будет, то есть искомый элемент , если он есть, всегда будет на определенном уровне)

Answer 1

Похоже что структура может быть любого уровня вложенности. Тогда Вам нужен какой-то признак из какого li выбирать данные. Например, отсутствие тега span (Но луче Вам определить более надёжный способ: через класс или атрибут). Тогда, можно выбрать, например, таким способом:

$('.opr').click(function() {
  var opr = $(this).val();
  $('.calc_haracteristics>ul>li').each(function(i, kvart) {
    if ($(kvart).children('span').text() == opr) {
      console.log('Объект найден');
      var res = [];
      $(kvart).find('li:not(:has( > span))').each(function(j, el) {
        res.push($(el).text());
      });
      console.log(res.length);
    }
  })
});

Answer 2

ну как вариант получить все элементы страницы и перебрать их

window.onload = () => {
    const R = document.getElementsByTagName('*');
    Array.from(R).forEach(element => {
        console.log(element);
    })
}

и уже тут как бы отбор легче будет

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

перемножить значения ключей объектов

products - объект со свойствами "имя продукта":"цена за единицу" order - объект со свойствами "имя продукта":"количество единиц"Нужно перемножить одниковые...

154

javascript