Question

我希望我的jquery用类“ToChange”更改块内的文本。它在当前的html文件中工作正常，但它不与外部html文件（我使用“load”方法插入）。这是我的代码：

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
<title>Home page</title>
<script src="jquery-3.1.1.js"></script>
<script> 
   $(function(){
      $('.insert_external').load("external.html"); 
   });
</script>
<script> 
    $(function(){
        length = document.getElementsByClassName("ToChange").length;
        for (i = 0; i < length; i++) {
            document.getElementsByClassName("ToChange")[i].innerHTML = "New Text";
        }
    });
</script>
</head>

<body>
<div class="insert_external"></div>

<div class="ToChange">
    This changes fine
</div>
<div class="ToChange">
    This changes fine too
</div>
</body>
</html>

external.html：

<div class="ToChange">
    This text does not change :(
</div>

结果我看到3个字符串：

本文不会改变：（

新文字

新文字

我希望他们所有人都成为“新文本”。是否可以仅使用带jquery的html和js来执行此操作？

Answer 1

在实际加载新内容之前，更新文本的函数正在运行，因为加载函数是异步工作的。您应该等到新数据加载完毕。为此，请使用.load（） - 函数的回调。

Answer 2

您必须更改load()回调中的html，以便新数据在此处，否则它将在旧DOM中更改，因为JS异步工作。

您必须等待.load()完成请求：

$('.insert_external').load("external.html", function() {
    length = document.getElementsByClassName("ToChange").length;
    for (i = 0; i < length; i++) {
        document.getElementsByClassName("ToChange")[i].innerHTML = "New Text";
    }
});

注意：由于您使用的是jQuery，因此最好使用.each()功能：

$('.insert_external').load("external.html", function() {
    $(".ToChange").each(function(){
        $(this).text("New Text");
    })
})

希望这有帮助。

Answer 3

尝试类似的东西

handleSubmit(event) {
    event.preventDefault();

    const name = ReactDOM.findDOMNode(this.refs.nameInput).value.trim();
    Meteor.call('lists.insert', name, (err, listId) => {
        console.log("in method insert = " + listId);
        // HERE I CAN HAVE THE GOOD ID
    });
    ReactDOM.findDOMNode(this.refs.nameInput).value = '';
}

render() {
    return (
        <Form bsClass="col-xs-12" onSubmit={this.handleSubmit.bind(this)} >
            <FormGroup bsClass="form-group">
                <FormControl type="text" ref="nameInput" placeholder="Add New List" />
            </FormGroup>
        </Form>
    );
}

完成后你只需要设置一个回调函数。

如何使用JQuery更改加载页面的innerHTML

3 个答案: