Question

目标：我正在尝试限制名为＃boom1的所有DIV ID中的所有文本框。

问题：无法全部解决（我认为循环方法存在问题）

$（function（）{

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

}）

如果可能的话，我很乐意得到一些帮助。

感谢。

附加DEMO

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

DEMO

id必须是唯一的。

使用类进行多次使用。

为每个div添加了课程boom。

也添加了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。以下内容将迭代每个“some-class”元素。

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


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

Answer 5

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

尝试为每个＆＃39;＃boom1＆＃39; ...添加一个课程，例如＆＃39; .boom-class＆＃39;然后在它上面执行jQuery。

通过ID jquery限制textarea字符

5 个答案: