closest()未按预期工作

Question

$("#main .primary")
        .width($(this).closest("#main .row")
        .outerWidth(true) - $(this).closest("#main .secondary")
        .outerWidth(true));

..完全不起作用。

我所做的是通过从main ( primary )中减去secondary的宽度来将宽度应用于父分区。

<div id="main">
    <div class="row">
        <div class="primary"></div>
        <div class="secondary"></div>
    </div>
</div>

谢谢

Answer 1

首先，选择器#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); 
})

Answer 2

希望下面的解决方案能对你有所帮助。

没有测试，因为没有时间。

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