Question

对不起，如果我的问题不清楚。基本上我有以下代码

HTML：

    <div class="container">
        <textarea class="newText" placeholder="Have something to say?"></textarea>
        <button class="btn btn-default btn-sm">Post</button>
    </div>
<div class="main">
    <div class="postFeed">
        <ul class="postFeedElements">
            <li>
                <ul class="iconList pull-right">
                    <li> <span class="remove glyphicon glyphicon-remove" data-toggle="tooltip" data-placement="right" title="Remove"></span>

                    </li>
                </ul>
                <li>
                     <h4 class="noSelect"> Text</h4>

                </li>
        </ul>
    </div>
</div>

JQuery的：

var newPost = function () {
$('.btn').click(function () {
    var post = $('.newText').val();
    $('<div class="postFeed"><ul class="postFeedElements"><li><ul class="iconList pull-right"><li><span class="remove glyphicon glyphicon-remove" data-toggle="tooltip" data-placement="right" title="Remove Post"></span></li></ul><li><h4 class="noSelect"></h4></li></ul></div>').appendTo('.container');
    $('.noSelect').text(post);
    $('.newText').val(" ");
});

http://jsfiddle.net/r8umr1m3/

texarea中的文本输入被传递到相同div元素的新标题中目前，当新文本传递给新div时，它会覆盖现有div中的任何现有文本，因为每个标题元素共享同一个类。我怎样才能使每个元素根据textarea中的输入具有不同的文本，同时仍然保持相同的类？

谢谢，

Answer 1

将文本本身插入选择器中的大字符串

'....<h4 class="noSelect">'+post+'</h4> ....'

并删除

$('.noSelect').text(post);

DEMO

Answer 2

/* remove */
var remove = function () {
    $(document).on('click', '.remove', function () {
        $(this).parents('.postFeed').remove();
    });
}
$(document).ready(remove);

var newPost = function () {
    $('.btn').click(function () {
        var post = $('.newText').val();
        var element = $('<div class="postFeed"><ul class="postFeedElements"><li><ul class="iconList pull-right"><li><span class="remove glyphicon glyphicon-remove" data-toggle="tooltip" data-placement="right" title="Remove Post"></span></li></ul><li><h4 class="noSelect"></h4></li></ul></div>');
        element.appendTo('.container');
        element.text(post);
        $('.newText').val(" ");
    });
};
$(document).ready(newPost);

<强> DEMO

Answer 3

在将新内容附加到DOM之前，操作和修改新内容的成本更低。

var newPost = function () {
    $('.btn').click(function () {
        var post = $('.newText').val(),
            newContent = $('<div class="postFeed"><ul class="postFeedElements"><li><ul class="iconList pull-right"><li><span class="remove glyphicon glyphicon-remove" data-toggle="tooltip" data-placement="right" title="Remove Post"></span></li></ul><li><h4 class="noSelect"></h4></li></ul></div>');

        $('.noSelect', newContent).text(post); //manipulate detached content
        $('.container').append( newContent ); //attach content
        $('.newText').val(" ");
    });
};
$(document).ready(newPost);

Answer 4

您可以将新元素保存在变量中，而不是使用jquery选择.noSelect，并使用.find在中查找新元素中的.noSelect 。这将仅更新您添加的元素，而不是更新类noSelect的所有元素：

var newPost = function () { $('.btn').click(function () { var post = $('.newText').val(); var $newEle = $('<div class="postFeed"><ul class="postFeedElements"><li><ul class="iconList pull-right"><li><span class="remove glyphicon glyphicon-remove" data-toggle="tooltip" data-placement="right" title="Remove Post"></span></li></ul><li><h4 class="noSelect"></h4></li></ul></div>') $newEle.appendTo('.container'); $newEle.find('.noSelect').text(post); $('.newText').val(" "); }); }

Answer 5

将以下代码替换为您的代码：

var newPost = function () {
    $('.btn').click(function () {
        var post = $('.newText').val();
        $('<div class="postFeed"><ul class="postFeedElements"><li><ul class="iconList pull-right">             <li><span class="remove glyphicon glyphicon-remove" data-toggle="tooltip" data-placement="right" title="Remove Post"></span></li></ul><li><h4 class="noSelect">'+post+'</h4></li></ul></div>').appendTo('.container');
        //$('.noSelect').text(post);
        $('.newText').val(" ");
    });
};

只需删除＆＃34; $（＆＃39; .noSelect＆＃39;）。text（post）;＆＃34;并在你的h4标签

之间添加帖子值

Answer 6

您只需要将正在创建的后馈div保存到变量中，并将后期文本添加到该变量中。

我已经更新了你的jquery代码： -

var newPost = function () {
    $('.btn').click(function () {
        var post = $('.newText').val();
        // Save the post feed div in a variable
        var newHeader = $('<div class="postFeed"><ul class="postFeedElements"><li><ul class="iconList pull-right"><li><span class="remove glyphicon glyphicon-remove" data-toggle="tooltip" data-placement="right" title="Remove Post"></span></li></ul><li><h4 class="noSelect"></h4></li></ul></div>').appendTo('.container');
// update the text in the newly created div
        newHeader.text(post);
        $('.newText').val(" ");
});

将.text直接添加到类中将更新该类的所有div。

Answer 7

Here是更正。基本上，您需要将创建的div作为变量并将新文本添加到其中。

这是javascript：

/* remove */
var remove = function () {
    $(document).on('click', '.remove', function () {
        $(this).parents('.postFeed').remove();
    });
}
$(document).ready(remove);

var newPost = function () {
    $('.btn').click(function () {
        var post = $('.newText').val();
        // get the new div as a variable
        var newDiv = $('<div class="postFeed"><ul class="postFeedElements"><li><ul class="iconList pull-right">             <li><span class="remove glyphicon glyphicon-remove" data-toggle="tooltip" data-placement="right" title="Remove Post"></span></li></ul><li><h4 class="noSelect"></h4></li></ul></div>');

        // append the new div
        newDiv.appendTo('.container');

        // set the text to this new div
        newDiv.text(post);
        $('.newText').val(" ");
    });
};
$(document).ready(newPost);

Answer 8

$('.noSelect').text(post);的整数你可以选择最后一个和前一个元素并设置它们。

   $($('.noSelect')[$('.noSelect').length-1]).text(post);
   $($('.noSelect')[$('.noSelect').length-2]).text(post);

https://jsfiddle.net/mrv9tr83/

希望它能解决你的问题

Answer 9

你不需要在javascript上编写整个html，因为它已经在html中了。使用clone（）获取现有的html。之后更新容器div下的最后一个前端文本

<强>脚本

/* remove */
var remove = function () {
    $(document).on('click', '.remove', function () {
        $(this).parents('.postFeed').remove();
    });
}

$(document).ready(remove);

var newPost = function () {
    $('.btn').click(function () {
        var post = $('.newText').val();
        var clone = $(".main > .postFeed").clone();
        $(".container").append(clone);
        $('.container  .noSelect').last().text(post);
        $('.newText').val(" ");
    });
};

$(document).ready(newPost);

如何在不覆盖现有元素的情况下向同一个类的元素添加新文本？

9 个答案: