Question

我想要在<ul>中重用一些非常酷的CSS。我想克隆现有的<li>（以便我可以重复使用CSS），更新字段，然后将其附加到<ul>的末尾。

我知道我可以做这样的事情来找到......

var temp = $(".chatboxcontent").find('li');
console.log(temp);

然后我可以这样使用.clone ......（这是正确的吗？）

var temp2 = temp.clone

然后我需要删除，然后插入我自己的

HTML元素看起来像这样......

<div class="chatboxcontent">
        <li class="current-user-message">
    <div class="avatar">
      <img src="http://placehold.it/50x50">
    </div>
    <div class="chatboxmessagecontent">
      <p>test</p>
      <time datetime="2016-07-28 16:45:20 UTC" title="28 Jul  2016 at 04:45PM">
        16:45 PM
      </time>
    </div>
  </li>
  <li class="current-user-message">
    <div class="avatar">
      <img src="http://placehold.it/50x50">
    </div>
    <div class="chatboxmessagecontent">
      <p>test</p>

...and so on

我需要删除然后在test元素中插入文字，然后将其附加到class="chatboxcontent"

我在想这样的事情......

var message_li = $(".chatboxcontent").find('li').clone();
$(message_li).innerHTML("p") = data.text;
$(".chatboxcontent").append(message_li);

从上面我得到$(...).innerHTML is not a function。那么如何删除元素然后插入呢？

有没有更好的方法来实现这个？

Answer 1

你可以试试这个：

$(".chatboxcontent") //Select the conatiner
.find('li:first') //Find the first 'li' element
.clone() //then clone it
.find('p') //Find the 'p' tag inside the cloned element
.html(data.text) // change the html of the 'p' tag
.end() // Return to the cloned 'li' with the 'p' tag changed
.appendTo('.chatboxcontent'); // append the cloned 'li' to the conatiner

演示： https://jsfiddle.net/iRbouh/x4h69939/

我希望这会有所帮助。

Answer 2

如果您有$(message_li).innerHTML("p") = data.text;，则需要将其替换为$(message_li).html(data.text);

此外，如果data.text尚未包含在您想要的标记中，您还可以执行以下操作：

$(message_li).html('' + data.text + '');

另一个解决方案，以及我个人会做的事情如下：

$('<li>').addClass('current-user-message').html($('.chatboxcontent').find('li').html()).appendTo(message_li);

然后在外部样式表中包含.current-user-message的CSS。

JQuery clone li + children，更新文本（在子标记中），并附加

2 个答案: