我的网页中有多个 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>最佳答案
迭代 div 并通过首先解开 img 来使用现有 a 标记来包装元素。
$(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)
});
});.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>关于javascript - 如何用第一个链接包装所有div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41822479/