$("#main .primary")
.width($(this).closest("#main .row")
.outerWidth(true) - $(this).closest("#main .secondary")
.outerWidth(true));
..根本不起作用。
我正在做的是通过从primary
(父级)中减去secondary
的宽度来将宽度应用于main
div。
<div id="main">
<div class="row">
<div class="primary"></div>
<div class="secondary"></div>
</div>
</div>
由于
答案 0 :(得分:4)
首先,选择器#main .row
将返回一个空的jQuery对象,
如果你想将具有id和类的元素匹配在一起,你可以像这样使用它:
#myId.my-class // Select by id and class
div#myId.my-class // Select by element and the id and the class
我建议你在你的情况下使用siblings()方法
$('#main .primary')
.width( function(){
return $(this).closest('.row').width() - // or you can use .parent() instead
$(this).siblings('.secondary').outerWidth(true);
})
答案 1 :(得分:0)
希望以下解决方案能为您提供帮助。
没有经过测试,因为没有时间。
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var main = $("#main");
var primary = main.find('.row > .primary');
var secondary = main.find('.row > .secondary');
var newWidth = main.width() - secondary.width() ;
console.log(newWidth);
primary.css('width',newWidth);
});
</script>
<div id="main" style="border:5px solid red;padding:10px;width:600px;">
<div class="row" style="border:5px solid red;padding:10px;width:500px;">
<div class="primary" style="border:2px solid #CCC;width:200px;padding:10px;"></div>
<div class="secondary" style="border:5px solid #669900;width:200px;padding:10px;"></div>
</div>
</div>