使用jQuery在div中显示alt标记-生成多个div

要在div中显示图像的alt属性并生成多个div，可以使用jQuery来遍历一组图像元素，并为每个图像创建一个新的div，其中包含图像的alt属性。以下是一个简单的示例：

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Alt Display</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="image-container">
        <img src="image1.jpg" alt="Description of image 1">
        <img src="image2.jpg" alt="Description of image 2">
        <img src="image3.jpg" alt="Description of image 3">
    </div>
    <div id="alt-display-container"></div>

    <script src="script.js"></script>
</body>
</html>

jQuery脚本 (script.js)

$(document).ready(function() {
    // 遍历所有的img元素
    $('#image-container img').each(function() {
        // 获取当前图像的alt属性
        var altText = $(this).attr('alt');
        
        // 创建一个新的div元素
        var newDiv = $('<div></div>');
        
        // 设置新div的内容为alt属性的值
        newDiv.text(altText);
        
        // 将新div添加到alt-display-container中
        $('#alt-display-container').append(newDiv);
    });
});

解释

HTML结构：定义了一个包含多个图像的image-container和一个空的alt-display-container用于显示alt文本。
jQuery脚本：
- 使用$(document).ready()确保DOM完全加载后再执行脚本。
- 使用$('#image-container img').each()遍历每个图像元素。
- 对于每个图像，获取其alt属性值。
- 创建一个新的div元素，并将其文本内容设置为获取到的alt属性值。
- 将这个新的div元素追加到alt-display-container中。