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 that you have read and understand our privacy policy and code of conduct.

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