0

Есть две группы блоков "дети" и "родители". нужно чтобы класс .acrive первоначально присвоился к родителю, затем ко всем его детям, затем перешел с следующему родителю и т.д. Попробовал 2 способа

1 способ:

$(".field-name-field-iconresults").each(function(i, el) {
      setTimeout(function() {
        $(el).addClass("active");
      }, 400 + (i * 400));
      $('.field-name-field-iconresults .field-item').each(function(j, chel) {
        setTimeout(function() {
          $(chel).addClass("active");
        }, 400 + (j * 800));
      })
    });
.field-name-field-iconresults .field-item {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
  background: #8BC34A;
}
.field-name-field-iconresults .field-item.active {
  background: #FF9800;
}
.field-name-field-iconresults {
  border: 2px dotted #E91E63;
}
.field-name-field-iconresults.active {
    border: 2px dotted #8BC34A;
    background: #B2EBF2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="view-content">
  <div class="views-row views-row-1 views-row-odd views-row-first">
    <div class="field field-name-title field-type-ds field-label-hidden">
      <div class="field-items">
        <div class="field-item" property="dc:title">
          <h2>Первый элемент</h2>
        </div>
      </div>
    </div>
    <div class="field field-name-field-iconresults field-type-image field-label-hidden">
      <div class="field-items">
        <div class="field-item">

        </div>
        <div class="field-item">

        </div>
      </div>
    </div>
  </div>
  <div class="views-row views-row-2 views-row-even">
    <div class="field field-name-title field-type-ds field-label-hidden">
      <div class="field-items">
        <div class="field-item" property="dc:title">
          <h2>Второй элемент</h2>
        </div>
      </div>
    </div>
    <div class="field field-name-field-iconresults field-type-image field-label-hidden">
      <div class="field-items">
        <div class="field-item">
        </div>
        <div class="field-item">

        </div>
        <div class="field-item">
        </div>
      </div>
    </div>
  </div>
  <div class="views-row views-row-3 views-row-odd">
    <div class="field field-name-title field-type-ds field-label-hidden">
      <div class="field-items">
        <div class="field-item" property="dc:title">
          <h2>Третий элемент</h2>
        </div>
      </div>
    </div>
    <div class="field field-name-field-iconresults field-type-image field-label-hidden">
      <div class="field-items">
        <div class="field-item">
        </div>
        <div class="field-item">
        </div>
      </div>
    </div>
  </div>
  <div class="views-row views-row-4 views-row-even views-row-last">
    <div class="field field-name-title field-type-ds field-label-hidden">
      <div class="field-items">
        <div class="field-item" property="dc:title">
          <h2>Последний элемент</h2>
        </div>
      </div>
    </div>
    <div class="field field-name-field-iconresults field-type-image field-label-hidden">
      <div class="field-items">
        <div class="field-item">
        </div>
        <div class="field-item">
        </div>
      </div>
    </div>
  </div>
</div>

2 способ:

$(".field-name-field-iconresults").each(function(i, el) {
	setTimeout(function() {
		$(el).addClass("active");
		$(el).find('.field-item').each(function(j, chel) {
			setTimeout(function() {
			$(chel).addClass("active");
			}, 400 + (j * 800));
			})
	}, 400 + (i * 400));
});
.field-name-field-iconresults .field-item {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
  background: #8BC34A;
}
.field-name-field-iconresults .field-item.active {
  background: #FF9800;
}
.field-name-field-iconresults {
  border: 2px dotted #E91E63;
}
.field-name-field-iconresults.active {
    border: 2px dotted #8BC34A;
    background: #B2EBF2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="view-content">
  <div class="views-row views-row-1 views-row-odd views-row-first">
    <div class="field field-name-title field-type-ds field-label-hidden">
      <div class="field-items">
        <div class="field-item" property="dc:title">
          <h2>Первый элемент</h2>
        </div>
      </div>
    </div>
    <div class="field field-name-field-iconresults field-type-image field-label-hidden">
      <div class="field-items">
        <div class="field-item">

        </div>
        <div class="field-item">

        </div>
      </div>
    </div>
  </div>
  <div class="views-row views-row-2 views-row-even">
    <div class="field field-name-title field-type-ds field-label-hidden">
      <div class="field-items">
        <div class="field-item" property="dc:title">
          <h2>Второй элемент</h2>
        </div>
      </div>
    </div>
    <div class="field field-name-field-iconresults field-type-image field-label-hidden">
      <div class="field-items">
        <div class="field-item">
        </div>
        <div class="field-item">

        </div>
        <div class="field-item">
        </div>
      </div>
    </div>
  </div>
  <div class="views-row views-row-3 views-row-odd">
    <div class="field field-name-title field-type-ds field-label-hidden">
      <div class="field-items">
        <div class="field-item" property="dc:title">
          <h2>Третий элемент</h2>
        </div>
      </div>
    </div>
    <div class="field field-name-field-iconresults field-type-image field-label-hidden">
      <div class="field-items">
        <div class="field-item">
        </div>
        <div class="field-item">
        </div>
      </div>
    </div>
  </div>
  <div class="views-row views-row-4 views-row-even views-row-last">
    <div class="field field-name-title field-type-ds field-label-hidden">
      <div class="field-items">
        <div class="field-item" property="dc:title">
          <h2>Последний элемент</h2>
        </div>
      </div>
    </div>
    <div class="field field-name-field-iconresults field-type-image field-label-hidden">
      <div class="field-items">
        <div class="field-item">
        </div>
        <div class="field-item">
        </div>
      </div>
    </div>
  </div>
</div>

Оба способа не подходят, для поставленной задачи, регулирование временного интервала, считаю не универсальным, так как количество "детей" у "родителей" разное. Возможно есть способ перебрать как массив, но с ними мне трудно дается подружиться)

1 ответ 1

2

составить очередь(массив) и обходить элементы массива через таймер.

$(function() {
  var arr = [];
  $(".field-name-field-iconresults").each(function(i, el) {
    arr.push(el);
    $(".field-item", el).each(function(i, el) {
      arr.push(el)
    })
  });
  ! function show() {
    var el = arr.shift();
    if (el) {
      $(el).addClass("active");
      window.setTimeout(show, 800)
    }
  }()
});
.field-name-field-iconresults .field-item {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
  background: #8BC34A;
}
.field-name-field-iconresults .field-item.active {
  background: #FF9800;
}
.field-name-field-iconresults {
  border: 2px dotted #E91E63;
}
.field-name-field-iconresults.active {
  border: 2px dotted #8BC34A;
  background: #B2EBF2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="view-content">
  <div class="views-row views-row-1 views-row-odd views-row-first">
    <div class="field field-name-title field-type-ds field-label-hidden">
      <div class="field-items">
        <div class="field-item" property="dc:title">
          <h2>Первый элемент</h2>
        </div>
      </div>
    </div>
    <div class="field field-name-field-iconresults field-type-image field-label-hidden">
      <div class="field-items">
        <div class="field-item">

        </div>
        <div class="field-item">

        </div>
      </div>
    </div>
  </div>
  <div class="views-row views-row-2 views-row-even">
    <div class="field field-name-title field-type-ds field-label-hidden">
      <div class="field-items">
        <div class="field-item" property="dc:title">
          <h2>Второй элемент</h2>
        </div>
      </div>
    </div>
    <div class="field field-name-field-iconresults field-type-image field-label-hidden">
      <div class="field-items">
        <div class="field-item">
        </div>
        <div class="field-item">

        </div>
        <div class="field-item">
        </div>
      </div>
    </div>
  </div>
  <div class="views-row views-row-3 views-row-odd">
    <div class="field field-name-title field-type-ds field-label-hidden">
      <div class="field-items">
        <div class="field-item" property="dc:title">
          <h2>Третий элемент</h2>
        </div>
      </div>
    </div>
    <div class="field field-name-field-iconresults field-type-image field-label-hidden">
      <div class="field-items">
        <div class="field-item">
        </div>
        <div class="field-item">
        </div>
      </div>
    </div>
  </div>
  <div class="views-row views-row-4 views-row-even views-row-last">
    <div class="field field-name-title field-type-ds field-label-hidden">
      <div class="field-items">
        <div class="field-item" property="dc:title">
          <h2>Последний элемент</h2>
        </div>
      </div>
    </div>
    <div class="field field-name-field-iconresults field-type-image field-label-hidden">
      <div class="field-items">
        <div class="field-item">
        </div>
        <div class="field-item">
        </div>
      </div>
    </div>
  </div>
</div>

1
  • А это это означает? ! function никогда раньше не встречался (да и опыта большого нет)
    – engenes
    23 авг 2016 в 12:31

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.