Question

我正在尝试修改内存中模板的html，然后将其添加到另一个html元素

var messageTemplate = $("#messageTemplate").clone()
                          .removeAttr('id').removeClass("hidden").html();
var timeStamp = message.TimeStamp;
console.log(timeStamp)
var relativeTime = moment(timeStamp, "YYYYMMDD").fromNow();

$(messageTemplate).find("#message").html(message.Data)
$(messageTemplate).find("#moment").html(relativeTime);
$(messageTemplate).find("#senderName").html(message.SenderUser.Username);

$("#message-dropdown").prepend(messageTemplate);

抓住模板工作正常并且在它之前，html是原始模板，即使我正在设置html，也不会修改。谁能解释如何正确设置克隆元素的html？

我在这里创造了一个小提琴https://jsfiddle.net/d9s6twp1/5/

Answer 1

修改，更新

jQuery未加载到jsfiddle。另请注意，您之前已将重复的id预先添加到document; id中的document应该是唯一的。在元素处设置唯一template，新id时重新定义变量html。如果最初在template html字符串变量中包含多个元素，则可以使用相同的过程;即使用.filter()，为元素创建唯一的id，定义或重新定义引用克隆元素的每个变量名称

＆＃13;

var template = $("#template")
              .clone().removeAttr("id")
              .removeClass("hidden")
              .html();

console.log(template);

// re-define `template`
template = $(template).filter("#username")
           .attr("id", "username-" + $("[id^=username]").length)
           .html("new user");

console.log(template[0].outerHTML);

$("#container").prepend(template)

＆＃13;

.hidden{
  display:none;
}

#container{
  background-color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="template" class="hidden">
<span id="username">Test User</span>
</div>

<div id="container">
<br>
<span>Element container</span>
</div>

＆＃13;

jsfiddle https://jsfiddle.net/d9s6twp1/7/

messageTemplate似乎返回.html()元素的#messageTemplate，即子元素.outerHTML，而不是#messageTemplate元素。

尝试用.filter()替换.find()来过滤#messageTemplate jQuery对象中包含的messageTemplate的子元素兄弟。

Answer 2

在子元素中使用class not Id。

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { User } from '../user';

@Injectable()
export class AuthService {
    private initPromise: Promise<boolean>;
    private user: User;

    constructor() {
        this.initPromise = new Promise(function(resolve, reject) {
            receiveUserFromServer(function(userData) {
                if (!userData) return resolve(null);

                let user = new User();
                user.id = userData.id;
                user.name = userData.name;

                resolve(user);
            });
        });
    }

    isLoggedIn() {
        // I don't know how to return Observable<boolean> here
        // true, if user from receiveUserFromServer is exists
        // but receiveUserFromServer should execute only once
    }
}

jQuery如何在内存中修改克隆元素的html

2 个答案: