在 Slide Bootstrap Carousel 中获取特定的高度和宽度 Div

Question

我正在使用 Boostrap Carousel。

我想在刷新页面或单击按钮时获取父级高度和宽度 div。

例如

我想在 id "data_3"

中获取父项的高度和宽度 div

我已经在 id "data_3" 中得到父级的高度和宽度 div 当放映幻灯片 3 时，但是当幻灯片 1 或幻灯片 2 或其他幻灯片我再次单击按钮时，我无法在 id "data_3" 中获取父级高度和宽度 div。

我想在其他幻灯片轮播（不仅是幻灯片 3）中的 id "data_3" 中获取父级高度和宽度 div 我很难解决这个问题。

这是我的代码 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>

Answer 1

当您单击按钮并获取其高度和宽度时，您始终可以在轮播中查找活动项目。

在您的点击功能中试试这些行：

  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);

在 Slide Bootstrap Carousel 中获取特定的高度和宽度 Div

Get Height and Width Specific Div in Slide Boostrap Carousel

html

javascript

css

jquery

carousel