我使用Boostrap Carousel。
我想在刷新页面或单击按钮时得到父级的高度和宽度div。
例如
我想在ID“ data_3”中获取父级的高度和宽度div
我已经在ID“ data_3”中获得了父级的高度和宽度div
当显示幻灯片3时，
但是当幻灯片1或幻灯片2或其他幻灯片再次单击按钮时，我无法获得ID为“ data_3”的父级高度和宽度div。
我想在其他幻灯片轮播中获取ID为“ data_3”的父级的高度和宽度div（不仅是幻灯片3）
我很困惑解决这个问题。
这是我的代码in Jsfiddle
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<style type="text/css">
.carousel {
height: 500px;
margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
width: 100%;
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
@media (min-width: 768px) {
.carousel-caption p {
margin-bottom: 20px;
font-size: 21px;
line-height: 1.4;
}
}
</style>
<script type='text/javascript'>
$(window).load(function(){
$("#carousel").carousel();
$( ".carousel-indicators" ).hide();
$("#btn").click(function(){
var width_div_parent = $('#data_3').closest('.box').width();
var height_div_parent = $('#data_3').closest('.box').height();
$("#result").html("Height : "+height_div_parent+" & Width : "+width_div_parent);
});
});
</script>
</head>
<body>
<center><button type="button" id="btn">Get Height & Width Div in Box 3</button><br/>
<div id="result"></div></center>
<div data-interval="2000" id="carousel" class="carousel slide" data-ride="carousel">
<!-- Menu -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<!-- Items -->
<div class="carousel-inner">
<div class="item active">
<div class="box">
<input type="hidden" name="data" id="data_1" value="1">
<h2 style="text-align:center">Box 1</h2>
</div>
</div>
<div class="item">
<div class="box" >
<input type="hidden" name="data" id="data_2" value="2">
<h2 style="text-align:center">Box 2</h2>
</div>
</div>
<div class="item">
<div class="box" >
<input type="hidden" name="data" id="data_3" value="3">
<h2 style="text-align:center">Box 3</h2>
</div>
</div>
</div>
</body>
</html>
最佳答案
单击按钮并获取其高度和宽度时，您始终可以在轮播中查找活动项。
在点击功能中尝试以下行：
var width_div_parent = $('#data_3').closest('.box').parent().parent().find('div.item.active .box').width();
var height_div_parent = $('#data_3').closest('.box').parent().parent().find('div.item.active .box').height();
$("#result").html("Height : "+height_div_parent+" & Width : "+width_div_parent);