javascript - 通过 ID jquery 限制 textarea 字符

Question

目标：我试图限制所有名为#boom1 的DIV ID 中的所有文本框。

问题：无法全部获取（我认为循环方法有问题）

$（函数（）{

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);
})        

})

如果可能的话，我会很高兴得到一些帮助，语法。

谢谢。

附加演示

Answer 1

$(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 2

尝试使用以下代码，工作正常

$(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 3

演示

id 必须是唯一的。

将类用于多种用途。

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()使您循环遍历元素的所有实例，因此您不应该使用 ID。以下将迭代每个“某些类”元素。

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


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

Answer 5

我不认为您可以在 id 上使用每个 - 它只会让您获得第一个。标识符应该是唯一的，并且每页只出现一次。所以只使用第一个。

尝试向每个“#boom1”添加一个类。例如“.boom-class”，然后在其上分别执行 jQuery。