0

Есть к примеру обычный список состоящий из "li" в каждом "li" есть текст. Можно ли сделать скриптом брать ширину которую занимает текст з li ?

Пробовал брать ширину с каждого тега li но ширину текста внутри тега не получается.

Пример списка:

 <ul>
   <li>ssssssssssssss</li>
 <ul>

Вот так пытался взять ширину :

    var widthListPr = 0;
  $('ul > li').each(function(){widthListPr = widthListPr + $(this).width() });
    console.log(widthListPr);
2
  • Вот так пытался взять ширину - и что не получилось?
    – Grundy
    10 фев 2016 в 19:04
  • @ Grundy, берется ширина точно не текста внутри тега , а всего тега. Например мне из примера выше выдавало 2000px. А мне нужно как-то получить ширину текста внутри тега. 10 фев 2016 в 19:09

3 ответа 3

3

Вам надо текст обернуть в "ничего не значащий элемент". В span самое разумное. И размер этого span и выяснять.

Предлагаю такой вариант:
HTML состоит из нескольких LI с содержимым разной длины. Проходим по каждому, оборачиваем в span, вычисляем длину и выводим результат в div.output.

$('li').each(function() {
  
  var orig = $(this).html();
  var wraped = '<span>' + orig + '</span>';
  $(this).html(wraped);
  var width = $(this).find('span:first-child').width();

  $('.output').html($('.output').html() + 'текст "' + $(this).html() + '" длиной ' + width + '<br />');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>вот это текст 1</li>
  <li>а тут текст 2</li>
  <li>ткст 3</li>
  <li>ну и в конец офигительный текст 4</li>
</ul>
<div class="output"></div>

1

Вариант от @cyadvert, но с использованием функций: wrapInner, find, map, toArray
А также с использованием String Templates из ES6

$('.output').html(
  $('li').wrapInner('<span></span>').find('span').map(function() {
    var $this = $(this);
    return `текст "${$this.html()}" длиной ${$this.width()}`;
  }).toArray().join('<br/>')
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>вот это текст 1</li>
  <li>а тут текст 2</li>
  <li>ткст 3</li>
  <li>ну и в конец офигительный текст 4</li>
</ul>
<div class="output"></div>

1

создаём инлайновый элемент и прогоняем тексты измеряя ширину элемента и никаких оборачиваний, другой вариант присвоить всем нужным элементам display: "inline" собрать размер и вернуть прежний css. ниже в примере первый вариант.

   $(function() {
     var c = $("li"),
       a = $("<li/>", {
         css: {
           display: "inline"
         }
       }).appendTo("body");
     $(".output").html($.map(c, function(b) {
       return b.textContent + "=>" + a.text(b.textContent).width() + "<br>"
     }));
     a.remove()
   });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>вот это текст 1</li>
  <li>а тут текст 2</li>
  <li>ткст 3</li>
  <li>ну и в конец офигительный текст 4</li>
</ul>
<div class="output"></div>

Ваш ответ

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

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