Форум

derevo · #1 (**permalink**) 14.03.2016, 19:33

Добрый день, уважаемые

Задача: сравнить содержимое элементов (li) с одинаковым классом (.srav и .srav2), и если во всех одинаковый текст (значение), то присвоить им класс (.odinak).

Структура до такая:

<ul>
<li class="srav">Текст 1</li>
<li class="srav"></li>
<li class="srav">Текст 3</li>
</ul>
<ul>
<li class="srav2">Текст 4</li>
<li class="srav2">Текст 4</li>
<li class="srav2">Текст 4</li>
</ul

Структура после такая:

<ul>
<li class="srav">Текст 1</li>
<li class="srav"></li>
<li class="srav">Текст 3</li>
</ul>
<ul>
<li class="srav2 odinak">Текст 4</li>
<li class="srav2 odinak">Текст 4</li>
<li class="srav2 odinak">Текст 4</li>
</ul

рони · #2 (**permalink**) 14.03.2016, 19:48

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

derevo · #3 (**permalink**) 14.03.2016, 19:55

Написал структуру до и после.
Натолкните пожалуйста на решение.

рони · #4 (**permalink**) 14.03.2016, 20:25

derevo,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
     .odinak {
       background-color: #228B22;
     }

  </style>

</head>

<body>
<ul>
<li class="srav">Текст 1</li>
<li class="srav"></li>
<li class="srav">Текст 3</li>
</ul>
<ul>
<li class="srav2">Текст 4</li>
<li class="srav2">Текст 4</li>
<li class="srav2">Текст 4</li>
</ul>
<script>
window.addEventListener("DOMContentLoaded", function() {
    var b = document.querySelectorAll("ul");
    [].forEach.call(b, function(a) {
        a = a.querySelectorAll("li");
        var b = a[0].innerHTML;
        [].every.call(a, function(a) {
            return a.innerHTML == b
        }) && [].forEach.call(a, function(a) {
            a.classList.add("odinak")
        })
    })
});
</script>
</body>

</html>

derevo · #5 (**permalink**) 14.03.2016, 20:57

Спасибо, но да, структуру не правильно написал. Нужно по другому.
На скрине показал как выглядит структура. Нужно при клике на чекбокс (только отличия) скрывать строку с одинаковыми значениями.
Т.е. получается нужно сравнить все li.osnovtd.tr10 (tr11, tr12, ...) (записать их в массив и там их перебрать и сравнить?), а потом присвоить им класс, для примера .hide
И для li.osnovtr.tr10 (tr11, tr12, ...) также присвоить класс .hide

рони · #6 (**permalink**) 14.03.2016, 21:56

derevo,
нарисуйте эту структуру с картинки с кнопкой ... алгоритм скрипта от этого не изменится

derevo · #7 (**permalink**) 15.03.2016, 03:23

Ну как не измениться, я же специально подсветил на скрине колонку ul в которой вложены li. А нужно сравнить не в колонке ul, а li у разных ul.

рони · #8 (**permalink**) 15.03.2016, 06:41

derevo,
html please

derevo · #9 (**permalink**) 15.03.2016, 06:44

При клике на чекбокс ("только отличия") скрывать строку с одинаковыми значениями (т.е. скрыть строки "Тип акустики - коаксиальная - коаксиальная - коаксиальная" и "Количество полос - 2 - 2 - 2").

Т.е. получается нужно сравнить все li.osnovtd.tr10 (tr11, tr12, ...) (записать их в массив и там их перебрать и сравнить?), а потом присвоить им класс, для примера .hide
И для li.osnovtr.tr10 (tr11, tr12, ...) также присвоить класс .hide

Имеем такую структуру:

<input id="filter" type="checkbox">только отличия
<div class="cd-products-table">
   <div class="feateres">
      <ul class="cd-feateres-list">
         <li class="osnovtr tr10">Тип акустики</li>
         <li class="osnovtr tr11">Количество полос</li>
         <li class="osnovtr tr12">Мощность номинальная</li>
         <li class="osnovtr tr13">Мощность максимальная</li>
      </ul>
   </div>
   <div class="cd-products-wrapper">
      <ul class="cd-products-coliumns">
         <li class="product">
            <ul class="cd-feateres-list">
               <li class="osnovtd tr10">коаксиальная</li>
               <li class="osnovtd tr11">2</li>
               <li class="osnovtd tr12">60 Вт</li>
               <li class="osnovtd tr13">180 Вт</li>
            </ul>
         </li>
         <li class="product">
            <ul class="cd-feateres-list">
               <li class="osnovtd tr10">коаксиальная</li>
               <li class="osnovtd tr11">2</li>
               <li class="osnovtd tr12">30 Вт</li>
               <li class="osnovtd tr13">90 Вт</li>
            </ul>
         </li>
         <li class="product">
            <ul class="cd-feateres-list">
               <li class="osnovtd tr10">коаксиальная</li>
               <li class="osnovtd tr11">2</li>
               <li class="osnovtd tr12">60 Вт</li>
               <li class="osnovtd tr13">240 Вт</li>
            </ul>
         </li>
      </ul>
   </div>
</div>

Нужно получить в итоге:

<input id="filter" type="checkbox" checked="checked">только отличия
<div class="cd-products-table">
   <div class="feateres">
      <ul class="cd-feateres-list">
         <li class="osnovtr tr10 hide">Тип акустики</li>
         <li class="osnovtr tr11 hide">Количество полос</li>
         <li class="osnovtr tr12">Мощность номинальная</li>
         <li class="osnovtr tr13">Мощность максимальная</li>
      </ul>
   </div>
   <div class="cd-products-wrapper">
      <ul class="cd-products-coliumns">
         <li class="product">
            <ul class="cd-feateres-list">
               <li class="osnovtd tr10 hide">коаксиальная</li>
               <li class="osnovtd tr11 hide">2</li>
               <li class="osnovtd tr12">60 Вт</li>
               <li class="osnovtd tr13">180 Вт</li>
            </ul>
         </li>
         <li class="product">
            <ul class="cd-feateres-list">
               <li class="osnovtd tr10 hide">коаксиальная</li>
               <li class="osnovtd tr11 hide">2</li>
               <li class="osnovtd tr12">30 Вт</li>
               <li class="osnovtd tr13">90 Вт</li>
            </ul>
         </li>
         <li class="product">
            <ul class="cd-feateres-list">
               <li class="osnovtd tr10 hide">коаксиальная</li>
               <li class="osnovtd tr11 hide">2</li>
               <li class="osnovtd tr12">60 Вт</li>
               <li class="osnovtd tr13">240 Вт</li>
            </ul>
         </li>
      </ul>
   </div>
</div>

рони · #10 (**permalink**) 15.03.2016, 07:37

derevo,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
     .hide {
        display: none;
     }

  </style>

</head>

<body>
<input id="filter" type="checkbox">только отличия
<div class="cd-products-table">
   <div class="feateres">
      <ul class="cd-feateres-list">
         <li class="osnovtr tr10">Тип акустики</li>
         <li class="osnovtr tr11">Количество полос</li>
         <li class="osnovtr tr12">Мощность номинальная</li>
         <li class="osnovtr tr13">Мощность максимальная</li>
      </ul>
   </div>
   <div class="cd-products-wrapper">
      <ul class="cd-products-coliumns">
         <li class="product">
            <ul class="cd-feateres-list">
               <li class="osnovtd tr10">коаксиальная</li>
               <li class="osnovtd tr11">2</li>
               <li class="osnovtd tr12">60 Вт</li>
               <li class="osnovtd tr13">180 Вт</li>
            </ul>
         </li>
         <li class="product">
            <ul class="cd-feateres-list">
               <li class="osnovtd tr10">коаксиальная</li>
               <li class="osnovtd tr11">2</li>
               <li class="osnovtd tr12">30 Вт</li>
               <li class="osnovtd tr13">90 Вт</li>
            </ul>
         </li>
         <li class="product">
            <ul class="cd-feateres-list">
               <li class="osnovtd tr10">коаксиальная</li>
               <li class="osnovtd tr11">2</li>
               <li class="osnovtd tr12">60 Вт</li>
               <li class="osnovtd tr13">240 Вт</li>
            </ul>
         </li>
      </ul>
   </div>
</div>

<script>
window.addEventListener("DOMContentLoaded", function() {
    var b = document.querySelector("#filter");
    b.addEventListener("change", function() {
        [".tr10", ".tr11", ".tr12", ".tr13"].forEach(function(a) {
            a = document.querySelectorAll(a);
            var c = a[1].innerHTML,
                c = b.checked && [].every.call(a, function(a, b) {
                    return !b || a.innerHTML == c
                }) ? "add" : "remove";
            [].forEach.call(a, function(a) {
                a.classList[c]("hide")
            })
        })
    })
});

</script>
</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript