无法将类或属性添加到元素

Question

I would like to add individual id's to each of my div tags that has the class "chapter". 我想向具有类“章节”的每个div标签添加单独的ID。 By putting in an alert box, I have checked that it does indeed iterate over 16 elements which is what is expected since this is the number of div elements with the class "chapter". 通过放置一个警告框，我检查了它确实确实迭代了16个元素，这是可以预期的，因为这是具有“章节”类的div元素的数量。 I tried both adding another class (via addClass) and adding an id to the elements as below. 我尝试了添加另一个类（通过addClass）并向元素添加ID，如下所示。 But it doesn't work. 但这是行不通的。 What am I missing here? 我在这里想念什么？

javascript: javascript：

$(document).ready(function() {
    $(".chapter").each(function(index) {
        $(this).attr('id', 'chapter' + index + 1);
    });
});

html: 的HTML：

!DOCTYPE html>
<html>
    <head>
        <title>Programming examples for 70-480</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript" src="70-480.js"></script>
    </head>
    <body>
        <h1>Programming examples for 70-480</h1>
        <h4>Training Guide Programming in HTML5 with JavaScript and CSS3</h4>
        <ul>
            <div class="chapter"><li>Chapter 1: Getting started with Visual Studio 2012 and Blend for Visual Studio 2012</li>
                <ul>
                    <li>Lesson 1: Visual Studio 2012</li>
                    <li>Lesson 2: Blend for Visual Studio 2012</li>
                </ul>
            </div>
            <div class="chapter"><li>Chapter 2: Getting started with HTML5</li>
                <ul>
                    <li>Lesson 1: Introducing HTML5</li>
                    <li>Lesson 2: Embedding content</li>
                </ul>
            </div>
            ...

Answer 1

The issue here is because your HTML is invalid. 这里的问题是因为您的HTML无效。 the div elements are not allowed to be direct descendants or ul elements and are being removed/moved elsewhere in the DOM. div元素不允许是直接后代或ul元素，并且会在DOM中的其他位置删除/移动。 You should add the chapter class to the top level li , then your code will work fine. 您应该将chapter类添加到顶层li ，这样您的代码才能正常工作。

<ul>
    <li class="chapter">
        Chapter 1: Getting started with Visual Studio 2012 and Blend for Visual Studio 2012
        <ul>
            <li>Lesson 1: Visual Studio 2012</li>
            <li>Lesson 2: Blend for Visual Studio 2012</li>
        </ul>
    </li>
    <li class="chapter">
        Chapter 2: Getting started with HTML5
        <ul>
            <li>Lesson 1: Introducing HTML5</li>
            <li>Lesson 2: Embedding content</li>
        </ul>
    </li>
</ul>

Also, as @Pointy suggested you need to wrap the index + 1 logic in brackets to prevent it being interpreted as string concatenation: 另外，如@Pointy所建议，您需要将index + 1逻辑包装在方括号中，以防止将其解释为字符串连接：

$(".chapter").each(function(index) {
    $(this).attr('id', 'chapter' + (index + 1));
});

Example fiddle 小提琴的例子

Answer 2

Here is the working demo : 这是工作示例：

FIDDLE 小提琴

Here is the JS: 这是JS：

$(".chapter").each(function(index) {
var index = index+1;
$(this).attr('id', 'chapter' + index);
});

无法将类或属性添加到元素

问题描述

2 个解决方案

解决方案1
5 2014-11-10 15:39:43

解决方案2
0 2014-11-10 15:44:01

无法将类或属性添加到元素

问题描述

2 个解决方案

解决方案1 5 2014-11-10 15:39:43

解决方案2 0 2014-11-10 15:44:01

解决方案1
5 2014-11-10 15:39:43

解决方案2
0 2014-11-10 15:44:01