Question

这是我网站的结构，显示用户发布的文章。该网站允许用户发布他们自己的文章，该文章被预先添加到正文并在通过AJAX保存到数据库时立即显示。

<div class = 'article-wrapper-outer'>
    <div class = 'article-wrapper-inner'>
        <div class = 'article-wrapper'>
            <p class = 'header-details'>
                <span class = 'name-detail'>Yax</span>
                <span class = 'time-detail'>30-11-2014 : 5:43pm</span>
                <span class = 'articleID-detail'>12</span>
            </p>
            <p class = 'main-article'>
                How do regenerate this in the easiest 
                way possible with jQuery?           
            </p>
        </div>
    </div>
</div>

每当用户发布文章时，我会重新创建并连接所有这些html，更改这些类的内容：

name-detail
time-detail
articleID-detail
main-article

但我觉得他们应该是一个更好的方法。

我可以说：

var main-Article = $('.article-wrapper-outer:first').html();

如果可能，我如何达到这四个课程并更改其内容？如果不可能，最好的方法是什么？

Answer 1

您可以克隆文章文档片段，只需替换新部分即可。但是，如果您切换到像CanJS这样的MV *框架，您会发现您的应用程序将更易于维护和扩展。以下是Todo列表的示例，其中展示了您添加到应用中的相同类型的功能：http://todomvc.com/examples/canjs/

以下是您手动克隆和交换值所必须做的事情。它完成了工作，但这段代码有点脆弱，几乎没有机会在其他地方重复使用。

$('#makeArticle').on('click', function(ev) {
  ev.preventDefault();

  var $form = $(this.form);
  var name = $form.find('#name').val();
  var articleBody = $form.find('#articleBody').val();

  var $articles = $('.article-wrapper-inner'); // get all articles container
  var $newArticle = $articles.first().clone(); // clone first article

  $newArticle.find('.name-detail').text(name); // update author name
  $newArticle.find('.main-article').text(articleBody); // update article body

  $articles.prepend($newArticle); // make updated article first in articles container
});

jsbin示例：http://jsbin.com/pezofopume/1/edit?html,js,output

使用jQuery生成已经存在于DOM中的大块HTML的最简单和最佳方法

1 个答案: