Question

这是我的代码..

<div style="width: 89px">
     <span class="copyText">This is some text to copy.</span>
     <span>Can't copy </span>
     <span class="copyText1">And this is yet more text.</span>
</div>

我需要获取div元素宽度并添加+6 px并将此值设置为此范围<span>Can't copy </span>

如果可能请给我解决方案..

Answer 1

您可以结合使用children和width：

来完成此操作

var context = $("div");
(context.children("span")[2]).width(context.width() + 6);

Answer 2

试试这个：

<div class="myDiv" style="width: 89px">
     <span class="copyText">This is some text to copy.</span>
     <span class="setSpan">Can't copy </span>
     <span class="copyText1">And this is yet more text.</span>
</div>

Jquery的：

var width = parseInt($(".myDiv").css("width").replace("px","")) + 6;
$(".setSpan").css("width",width);

Answer 3

是的，这是可能的。

首先获取div的宽度并添加6px。

var width = parseInt($("div").css("width").replace("px","")) + 6;

然后使用nth选择器jQuery设置宽度。

$( "div span:nth-child(2)" ).css( "width", width );

Answer 4

在这个fiddle中，脚本将div的宽度和第二个子跨度增加6px。

$(document).ready(function() {
  var wdth = $('div').width();
  wdth += 6;
  $('div').css({
    'width': wdth
  });
  $('div span:nth-child(2)').css({
    'width': wdth
  })
});

在这样的例子中，选择没有类或id的div没有问题，但如果你有更多的div，选择你想要的那个会更复杂 - 因此我建议把一个类或id放到它上面，你能否在你的情况下。

Answer 5

当你标记一个jquery时......你只需要

var divWidth = $('div').outerWidth(); 
$('div > span:nth-child(2)').css('width' , divWidth + 6 +'px');

<强>演示

＆＃13;

var divWidth = $('div').outerWidth();
$('div > span:nth-child(2)').css('width' , divWidth + 6 +'px');

＆＃13;

div{
  background : #eee;
}

span{
  padding : 5px 0px;
}

span:not([class^=copyText]){
  background : #005eff;
  color : #fff;
  display : block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 89px">
     <span class="copyText">This is some text to copy.</span>
     <span>Can't copy </span>
     <span class="copyText1">And this is yet more text.</span>
</div>

＆＃13;

我需要使用jquery在子元素中设置宽度值？

5 个答案: