Определение, переносятся ли элементы с помощью jQuery / getClientRects()

#jquery

Вопрос:

Мне нужно применить функцию jQuery к a div только в том случае, если span элементы внутри нее переносятся. Я пытаюсь определить это с getClientRects() помощью, но он всегда возвращает одну строку. Вы можете увидеть это во фрагменте ниже. Есть ли здесь что-то явно неправильное?

 jQuery(function() {
  var minimized_elements = $('.countLines');
  var maxLines = 1;
  
  minimized_elements.each(function() {
    var lineCount = $(this)[0].getClientRects().length;
    alert(lineCount);
  });
});

 div {
  width: 70%;
  background-color: #898989;
}

span {
  display: inline-block;
  width: 30%;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="countLines">
  <span>item 1</span><span>item 2</span><span>item 3</span><span>item 4</span><span>item 5</span><span>item 6</span>
</div>

Ответ №1:

Для достижения того, что вам требуется, вы можете вместо этого получить уникальный набор верхних позиций span элементов. Оттуда вы можете подсчитать количество значений в этом наборе; это будет количество строк, которые пересекают промежутки. Попробуйте это:

 jQuery($ => {
  let lines = new Set($('.countLines span').map((i, el) => $(el).offset().top).get()).size;
  console.log(lines);
});

 div {
  width: 70%;
  background-color: #898989;
}

span {
  display: inline-block;
  width: 30%;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="countLines">
  <span>item 1</span><span>item 2</span><span>item 3</span><span>item 4</span><span>item 5</span><span>item 6</span>
</div>

Ответ №2:

Вот так: в чистом Javascript.

Это делается путем получения общей ширины всех элементов span. Затем мы сравниваем его с родительской шириной. Если ширина родительского элемента меньше общей ширины, мы определяем, что он переносится.

 var el = document.querySelector(".countLines"),
    span = el.querySelectorAll("span"),
    totalWidth = 0;

span.forEach(span => totalWidth  = span.clientWidth);

if (el.clientWidth < totalWidth) {
  console.log("Wrapping!");
}

 div {
  width: 70%;
  background-color: #898989;
}

span {
  display: inline-block;
  width: 30%;
}

 <div class="countLines">
  <span>item 1</span><span>item 2</span><span>item 3</span><span>item 4</span><span>item 5</span><span>item 6</span>
</div>