javascript - 如何在 div 标签中附加一些额外的文本

Question

我正在尝试获取已选中的复选框的标签文本，并尝试附加到跨度标记中，
当用户单击弹出窗口中的确定按钮时，
它不起作用。这是我的jsfiddle

我的脚本是：

$('.modal-footer .preSuccess').click(function(){            
            var parentElement=$(this).parent().parent().attr('id');
            $('#'+parentElement+ '.modal-body  input[type="checkbox"]').each(function(){
                var pre =$(this).next('label').text();
                if($(this).is(':checked')){
                    $('.'+parentElement+'Pre').append('<span>'+pre+'</span>'); 
                }   
            });

        });

Answer 1

尝试

$('.modal-footer .preSuccess').click(function () {
    var modal = $(this).closest('.modal');
    var parentElement = modal.attr('id'); // issue here, use closest to get a parent matching the selector
    //again issue with the selector
    modal.find('.modal-body  input[type="checkbox"]').each(function () {
        var pre = $(this).next('label').text();
        if ($(this).is(':checked')) {
            $('.' + parentElement + 'Pre').append('<span>' + pre + '</span>');
        }
    });

});

演示：小提琴

Answer 2

I took a look at your code and you're missing a space when querying the checkbox:

 $('#'+parentElement+ ' .modal-body  input[type="checkbox"]')

It wasn't able to find your checkbox and couldn't find the texts.

Other than that I would advice against the .parent().parent() structure, cause it's very prone to future bugs. Maybe just call the id directly, but I'm not sure how you're using this code.