Question

我试图编写一个jQuery脚本，将input及其对应的label移到其父div之外，然后将其放置在单独的{{1}之后}}：

＆＃13;

div

＆＃13;

    $("input[id*='-clear_id']").add("label[for*='-clear_id']").wrapAll("<div class='clear-button-wrapper'/>")
    $('.clear-button-wrapper').parent().after($('.clear-button-wrapper'));

＆＃13;

然而，我注意到，之后的元素<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script> <form> <div class="row"> <div class="file-field input-field col s12"> <label class="active" for="id_headshot">Headshot</label> <div class="btn"> <span>File</span> Currently: <a href="https://lucy-dev2.s3.amazonaws.com/uploads/IMG_3515.png">IMG_3515.png</a> <input type="checkbox" name="headshot-clear" id="headshot-clear_id" /> <label for="headshot-clear_id">Clear</label><br /> Change: <input type="file" name="headshot" id="id_headshot" /> </div> <div class="file-path-wrapper"> <input class="file-path validate" type="text"> </div> </div> </div> </form>与类div一起向下移动，因为它不再适合file-path-wrapper（请注意下划线不再与按钮底部对齐）：

我也看到了与动态添加到Materialize表的其他内容类似的行为。似乎Materialise计算每个元素的前端宽度，并且不调整宽度以适应稍后动态添加的块元素。

理想情况下，我想调用<div class="row">这样的内容来重新计算新插入内容的元素宽度。这可能吗？

Answer 1

为了解决这个特殊问题，我最后只将'right'类添加到wrapAll参数中。这使得＆＃39; Clear＆＃39;输入浮动到右边，一切再次适合一行：

＆＃13;

    $("input[id*='-clear_id']").add("label[for*='-clear_id']").wrapAll("<div class='clear-button-wrapper right'/>")
    $('.clear-button-wrapper').parent().after($('.clear-button-wrapper'));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
    
  <form>
  <div class="row">
    <div class="file-field input-field col s12">
      <label class="active" for="id_headshot">Headshot</label>
      <div class="btn">
        <span>File</span>
        Currently: <a href="https://lucy-dev2.s3.amazonaws.com/uploads/IMG_3515.png">IMG_3515.png</a>
<input type="checkbox" name="headshot-clear" id="headshot-clear_id" />
<label for="headshot-clear_id">Clear</label><br />
Change:
<input type="file" name="headshot" id="id_headshot" />
        
      </div>
      <div class="file-path-wrapper">
        <input class="file-path validate" type="text">
      </div>
    </div>
  </div>
  </form>

＆＃13;

结果如下：

如何重新计算＆＃39;动态插入元素后，Materialise行中元素的宽度？

1 个答案: