向元素添加属性

Question

我正在尝试向元素添加属性。该属性将指示某个高度和屏幕宽度中心的位置。这就是为什么我尝试使用 jquery 来获取屏幕宽度中心的位置。

所以，这段代码： <script>$("p.slider-price").attr('data-position', '145, ' + (($("p.slider-price").parent().width() - $("p.slider-price").outerWidth()) / 2));</script> 正确添加属性 data-position: "145, 500"。

但是我尝试对另一个元素使用相同的代码：$("p.house-description").attr('data-position', '200, ' + (($("p.house-description").parent().width() - $("p.house-description").outerWidth()) / 2));，但由于某种原因，微积分总是 returns 0，所以它只是添加 data-position: "200, 0".

最终代码为：

<script>
$("p.slider-price").attr('data-position', '145, ' + (($("p.slider-price").parent().width() - $("p.slider-price").outerWidth()) / 2));
$("p.house-description").attr('data-position', '200, ' + (($("p.house-description").parent().width() - $("p.house-description").outerWidth()) / 2));
</script>

所以问题是第二行的微积分不能正常工作（总是 returns 0），而第一行的微积分可以完美地工作。有什么问题吗？

编辑：这是 HTML 代码：

p class="slider-price" data-in="fade" data-step="1" data-delay="250" data-out="fade">
                        ,000
                    </p>    
                    <p class="house-description" data-in="fade" data-step="1" data-delay="350" data-out="fade">
                        Modern Apartment in Kiev, Ukraine
                    </p>

基本上这部分代码：(($("p.house-description").parent().width() - $("p.house-description").outerWidth()) / 2)总是returns0；不知道为什么。

Answer 1

所以，只是为了在评论部分跟进我的 post。您的 p.slider-价格默认为 display:block。它占用父级的内部宽度。

你需要设置p的宽度slider-price/description你的js代码才能生效

p.slider-price{
  width:400px;
}

$(document).ready(function(){

  console.log( $("p.slider-price").parent().width() );
  console.log( $("p.slider-price").outerWidth() );
  var leftDist = (parseInt($("p.slider-price").parent().width()) - parseInt($("p.slider-price").outerWidth()))/2;
  console.log( leftDist );                       
  $("p.slider-price").attr('data-position', '145, ' + leftDist);

});

codepen 示例：http://codepen.io/anon/pen/bNRORQ

向元素添加属性

Adding an attribute to element

jquery

attributes

element