Ограничить текстовые символы по ID jquery

Question

Цель: Я пытаюсь ограничить все свои текстовые поля во всех идентификаторах DIV с именем # boom1.

Проблема: Не можете получить их все (проблема с методом петли на мой взгляд)

$ (функция() {

var maxL = 300; 

$('#boom1').each(function (i, div) { //I got lost with syntax over here 

    var text = $('#boom1').text(); 
    if(text.length > maxL) { 

     var begin = text.substr(0, maxL), 
      end = text.substr(maxL); 

     $('#boom1').html(begin) 
      .append($('<a class="readmore"/>').attr('href', '#').html('read more...')) 
      .append($('<div class="hidden" />').html(end)); 
    } 

}); 

$(document).on('click', '.readmore', function() { 
    $(this).next('.hidden').slideDown(750); 
})   

})

I 'будем рады помочь, с синтаксисом, если это возможно.

Спасибо.

Прикрепление DEMO

Answer 1

попробуйте использовать следующий код, работает нормально

$(function() { 

    var maxL = 300; 


    $('.wp-caption-text').each(function (i, div) { 
     //alert("dfs"); 
     var text = $(this).text(); 
     if(text.length > maxL) { 

      var begin = text.substr(0, maxL), 
       end = text.substr(maxL); 

      $(this).html(begin) 
       .append($('<a class="readmore"/>').attr('href', '#').html('read more...')) 
       .append($('<div class="hidden" />').html(end)); 

     } 

    }); 

    $(document).on('click', '.readmore', function() { 
     $(this).next('.hidden').slideDown(750); 
    })   


}) 

Answer 2

$(function() { 

    var maxL = 300; 

    $('#boom1').each(function() { // If you don't use them you won't need them here 

     var text = $('#boom1').text(); 
     if(text.length > maxL) { 

      var begin = text.substr(0, maxL), 
       end = text.substr(maxL); 

      $('#boom1').html(begin) 
       .append($('<a class="readmore"/>').attr('href', '#').html('read more...')) 
       .append($('<div class="hidden" />').html(end)); 
     } 

    }); 

    $(document).on('click', '.readmore', function() { 
     $(this).next('.hidden').slideDown(750); 
    }); 



}); 

Answer 3

DEMO

идентификатор должен быть уникальным.

Используйте классы для многократного использования.

добавленный класс boom для каждого div.

добавлен read less... и read more... переключение особенность тоже.

$(this) относится к текущему элементу в цикле.

$(function() { 
    var maxL = 300; 
    $('.boom').each(function (i, div) { 
     var text = $(this).text(); 
     if (text.length > maxL) { 

      var begin = text.substr(0, maxL), 
       end = text.substr(maxL); 

      $(this).html(begin) 
       .append($('<a class="readmore"/>').attr('href', '#').html('read more...')) 
       .append($('<div class="hidden" />').html(end)); 
     } 
    }); 
    $(document).on('click', '.readmore', function() { 
     $(this).html(function(_,ctr){ 
      return (ctr == 'read more...') ? 'read less...':'read more...' 
     }); 
     $(this).next('.hidden').slideToggle(750); 
    }); 
}); 

Answer 4

.each() заставляет вас проходить через все экземпляры элемента, поэтому вам не следует использовать идентификатор. Следующее будет выполнять итерацию на каждом элементе «some-class».

<div class="some-class"></div> 
<div class="some-class"></div>  


$('.some-class').each(function (i, div) {/* code*/ }); 

Answer 5

Я не думаю, что вы можете использовать каждый по id - он только даст вам первый. Идентификаторы должны быть уникальными и отображаться только один раз на странице. Таким образом, будет использоваться только первый.

Попробуйте добавить класс к каждому «# boom1» .. например, «.boom-class», а затем выполнить jQuery каждый на нем.