Question

背景

我正在学习JQUERY / JAVASCRIPT。如果有人可以解释为什么会发生这种情况，我会遇到一个奇怪的问题。基本上我有一个简单的4项列表。代码旨在执行以下操作：

使用.remove（）删除第4项
使用JS For循环go throughlist更改符合条件的内容（li＃three的内容）。
使用.remove（），li＃one已删除
使用.text（）将li＃三个文本内容更改为Change3

问题

我的问题是第1步和第2步工作。但是循环之后的方法，即.remove（）和text（）不起作用。此外，如果我把这些方法放在循环的前面就可以了。

任何人都可以告诉我我做错了什么以及可能的解决方法吗？提前谢谢。

PS我使用Dreamweaver作为编辑器。

Ka Tech

代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>

<script>
$(document).ready(function() {

    $('li#four').remove();
    var $length = $('li').length;
    for (var i=0;i<=$length;i++)
    {
        var $item = $('li')[i].textContent;
        if ($item === "Item Two")
        {
            $('li')[i].textContent= "Change2";
        }
    }
    $('li#one').remove();
    $('li#three').text('Change3');

});
</script>
</head>

<body>

<ul class="list">
    <h2> List </h2>
    <li id=one class=hot>Item One</li>
    <li id=two>Item Two</li>
    <li id=three>Item Three</li>
    <li id=four>Item Four </li>
</ul>

</body>
</html>

Answer 1

这是因为你有一个脚本错误Uncaught TypeError: Cannot read property 'textContent' of undefined。这是因为var $length = $('li').length会给你3，而你的for循环从i=0迭代到i<=3但是当i==3在索引3处没有li元素时$('li')[i]将返回undefined导致错误

$(document).ready(function () {
    var $length = $('li').length;
    for (var i = 0; i < $length; i++) {
        var $item = $('li')[i].textContent;
        if ($item === "Item Two") {
            $('li')[i].textContent = "Change2";
        }
    }
    $('li#one').remove();
    $('li#three').text('Change3');

});

另一种方式

＆＃13;

$(document).ready(function () {
    $('li').each(function () {
        if ($(this).text() === "Item Two") {
            $(this).text('Change2')
        }
    })

    $('#one').remove();
    $('#three').text('Change3');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2> List </h2>
<ul class="list">
    <li id=one class=hot>Item One</li>
    <li id=two>Item Two</li>
    <li id=three>Item Three</li>
</ul>

＆＃13;

Answer 2

试试这个：

<强> Demo

var $length = $('li').length;
for (var i = 0; i <= $length; i++) {
    var $item = $('li').eq(i).text();
    if ($item === "Item Two") {
        $('li').eq(i).text("Change2");
    }
}
$('#one').remove();
$('#three').text('Change3');

JQUERY - for循环后方法不起作用

背景

问题

代码

2 个答案: