jquery将指定标签中的元素添加其后面
其实我也不知道该怎么表达这个问题。看代码吧。$("#skinimg").hover(function(){vartext=($(this).attr("alt"));$(...
其实我也不知道该怎么表达这个问题。
看代码吧。
$("#skin img").hover(function(){
var text=($(this).attr("alt"));
$(this).attr("title",text).after("<h4>"+text+"</h4>");
});
当鼠标经过图片，获取图片alt文字，添加title，添加<h4>标签。
#skin下有多张图片。
我需要的效果是，在文档打开之后，直接为图片添加title和标签。 展开
看代码吧。
$("#skin img").hover(function(){
var text=($(this).attr("alt"));
$(this).attr("title",text).after("<h4>"+text+"</h4>");
});
当鼠标经过图片，获取图片alt文字，添加title，添加<h4>标签。
#skin下有多张图片。
我需要的效果是，在文档打开之后，直接为图片添加title和标签。 展开
5个回答
展开全部
问题分析：
首先复述一下你的需求：在页面加载完毕后，将页面中#skin下的img标签进行修改，将其alt属性的值复制一份到其title属性。并在其后面追加h4标签，h4标签的内容为alt属性的值。
解决步骤：
通过使用jQuery的each方法遍历多个img标签。
1、获取alt属性的值。
2、通过jQuery的attr方法将获取的alt属性的值赋值给title属性。
3、通过jQuery的after方法将h4标签追加到img的后面。
举例如下：
HTML代码：
<div id="skin">
<img src="felix.jpg" alt="felix">
<img src="felix.jpg" alt="felix">
<img src="felix.jpg" alt="felix">
</div>
jQuery代码：
$.each($('#skin img'), function() {
var alt = $(this).attr('alt');
$(this).attr('title', alt).after('<h4>' + alt + '</h4>');
});页面运行后的HTML代码：
总结：从以上代码截图可以看出，在页面运行后，img标签中多了title属性，以及后面被追加了h4标签，title属性以及h4标签的值与alt属性完全相等。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
$(function(){
$("img").each(function(e){
var o =$("img").eq(e);
var p = o.attr("alt");
addSomething(o,p);
})
})
function addSomething(o,p){
o.attr("title",p);
o.after("<h4>"+p+"</h4>");
}<div id="skin">
<img src="images/01.jpg" alt="ninsnins" />
<img src="images/02.jpg" alt="123" />
<img src="images/03.jpg" alt="456" />
<img src="images/04.jpg" alt="789" />
</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<style type="text/css">
.skin { width:580px; background:#09F; margin:0 auto; overflow:hidden;}
.imgbox { width:100px; margin:10px 0 10px 10px; float:left;}
.imgbox h4 { text-align:center; height:20px; line-height:20px; padding:0; margin:0;}
.imgbox img { width:100px; height:100px; margin-bottom:10px;}
</style>
</head>
<body>
<div class="skin">
<div class="imgbox"><img src="1.jpg" width="100" height="100" alt="1" title="" /></div>
<div class="imgbox"><img src="1.jpg" width="100" height="100" alt="2" title="" /></div>
<div class="imgbox"><img src="1.jpg" width="100" height="100" alt="3" title="" /></div>
<div class="imgbox"><img src="1.jpg" width="100" height="100" alt="4" title="" /></div>
<div class="imgbox"><img src="1.jpg" width="100" height="100" alt="5" title="" /></div>
</div>
<script type="text/javascript">
$(function(){
$(".imgbox>img").each(function(){
var text=$(this).attr("alt");
$(this).parent(".imgbox").append("<h4>"+text+"</h4>");
$(this).attr("title",text);
});
})
</script>
</body>
</html>
希望对你有用
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<style type="text/css">
.skin { width:580px; background:#09F; margin:0 auto; overflow:hidden;}
.imgbox { width:100px; margin:10px 0 10px 10px; float:left;}
.imgbox h4 { text-align:center; height:20px; line-height:20px; padding:0; margin:0;}
.imgbox img { width:100px; height:100px; margin-bottom:10px;}
</style>
</head>
<body>
<div class="skin">
<div class="imgbox"><img src="1.jpg" width="100" height="100" alt="1" title="" /></div>
<div class="imgbox"><img src="1.jpg" width="100" height="100" alt="2" title="" /></div>
<div class="imgbox"><img src="1.jpg" width="100" height="100" alt="3" title="" /></div>
<div class="imgbox"><img src="1.jpg" width="100" height="100" alt="4" title="" /></div>
<div class="imgbox"><img src="1.jpg" width="100" height="100" alt="5" title="" /></div>
</div>
<script type="text/javascript">
$(function(){
$(".imgbox>img").each(function(){
var text=$(this).attr("alt");
$(this).parent(".imgbox").append("<h4>"+text+"</h4>");
$(this).attr("title",text);
});
})
</script>
</body>
</html>
希望对你有用
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
去看看appendTo()方法
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
