我的网页中有多个div,我想用div中的第一个链接包装它们。我为此编写了一个函数,但我想这不是动态的,所有div都有相同的链接我的错?
$(document).ready(function(){
var findAlink = $(".tab-col-2").find("a").attr("href");
$(".tab-col-2").wrapAll('<a href="'+findAlink+'"></a>');
});
.tab-col-2{
width:400px;
height:330px;
overflow:hidden;
border:1px solid #ccc;
float:left;
margin:10px;
}
.tab-col-2 img{
width:100%;
height:170px;
display:block;
}
.tab-col-2 h2,.tab-col-2 p{
text-align:center;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div class="tab-col-2">
<a href="http://www.stackoverflow.com">
<img src="http://support.yumpu.com/en/wp-content/themes/qaengine/img/default-thumbnail.jpg">
</a>
<h2>Title of the box</h2>
<p>explain of the title</p>
<p>73,40 US </p>
<a href="#">my boxes..</a>
</div><!-- col-->
<div class="tab-col-2">
<a href="http://www.google.com">
<img src="http://support.yumpu.com/en/wp-content/themes/qaengine/img/default-thumbnail.jpg">
</a>
<h2>Title of the box</h2>
<p>explain of the title</p>
<p>73,40 US </p>
<a href="#">my boxes..</a>
</div><!-- col-->
<div class="tab-col-2">
<a href="http://www.youtube.com">
<img src="http://support.yumpu.com/en/wp-content/themes/qaengine/img/default-thumbnail.jpg">
</a>
<h2>Title of the box</h2>
<p>explain of the title</p>
<p>73,40 US </p>
<a href="#">my boxes..</a>
</div><!-- col-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</body>
</html>
答案 0 :(得分:1)
迭代div并使用现有的a
标记包装元素,首先解开img
。
$(document).ready(function() {
// iterate over the divs
$(".tab-col-2").each(function() {
// get the `a` tag within the div
var $a = $('a', this);
// unwrap the img tag
$('img', $a).unwrap();
// get all child nodes and wrap it with the cached `a` tag
$(this).contents().wrapAll($a)
});
});
$(document).ready(function() {
$(".tab-col-2").each(function() {
var $a = $(this).find('a')
$('img', $a).unwrap();
$(this).contents().wrapAll($a)
});
});
&#13;
.tab-col-2 {
width: 400px;
height: 330px;
overflow: hidden;
border: 1px solid #ccc;
float: left;
margin: 10px;
}
.tab-col-2 img {
width: 100%;
height: 170px;
display: block;
}
.tab-col-2 h2,
.tab-col-2 p {
text-align: center;
}
&#13;
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div class="tab-col-2">
<a href="http://www.stackoverflow.com">
<img src="http://support.yumpu.com/en/wp-content/themes/qaengine/img/default-thumbnail.jpg">
</a>
<h2>Title of the box</h2>
<p>explain of the title</p>
<p>73,40 US</p>
<a href="#">my boxes..</a>
</div>
<!-- col-->
<div class="tab-col-2">
<a href="http://www.google.com">
<img src="http://support.yumpu.com/en/wp-content/themes/qaengine/img/default-thumbnail.jpg">
</a>
<h2>Title of the box</h2>
<p>explain of the title</p>
<p>73,40 US</p>
<a href="#">my boxes..</a>
</div>
<!-- col-->
<div class="tab-col-2">
<a href="http://www.youtube.com">
<img src="http://support.yumpu.com/en/wp-content/themes/qaengine/img/default-thumbnail.jpg">
</a>
<h2>Title of the box</h2>
<p>explain of the title</p>
<p>73,40 US</p>
<a href="#">my boxes..</a>
</div>
<!-- col-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</body>
</html>
&#13;
答案 1 :(得分:1)
您需要循环遍历每个div,然后将其包装在标记
中试试这个
$(document).ready(function(){
$(".tab-col-2").each(function(){
var findAlink = $(this).find("a").attr("href");
$(this).wrapAll('<a href="'+findAlink+'"></a>');
});
});
.tab-col-2{
width:400px;
height:330px;
overflow:hidden;
border:1px solid #ccc;
float:left;
margin:10px;
}
.tab-col-2 img{
width:100%;
height:170px;
display:block;
}
.tab-col-2 h2,.tab-col-2 p{
text-align:center;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div class="tab-col-2">
<a href="http://www.stackoverflow.com">
<img src="http://support.yumpu.com/en/wp-content/themes/qaengine/img/default-thumbnail.jpg">
</a>
<h2>Title of the box</h2>
<p>explain of the title</p>
<p>73,40 US </p>
<a href="#">my boxes..</a>
</div><!-- col-->
<div class="tab-col-2">
<a href="http://www.google.com">
<img src="http://support.yumpu.com/en/wp-content/themes/qaengine/img/default-thumbnail.jpg">
</a>
<h2>Title of the box</h2>
<p>explain of the title</p>
<p>73,40 US </p>
<a href="#">my boxes..</a>
</div><!-- col-->
<div class="tab-col-2">
<a href="http://www.youtube.com">
<img src="http://support.yumpu.com/en/wp-content/themes/qaengine/img/default-thumbnail.jpg">
</a>
<h2>Title of the box</h2>
<p>explain of the title</p>
<p>73,40 US </p>
<a href="#">my boxes..</a>
</div><!-- col-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</body>
</html>