jquery - 最近（）没有按预期工作

Question

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

..根本不起作用。

我正在做的是通过从（父）primary减去宽度来将宽度应用于 div 。secondarymain

<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

我建议您在您的情况下使用兄弟姐妹（）方法

$('#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>