Question

所需效果： 单击特定行上的按钮后，同一行上具有特定类的所有div元素应替换为<input type="text">标签。

问题： 我的代码使特定类的所有元素都得到转换，而不仅限于该特定行。

HTML：

<div class="container">
  <nav aria-label="Pagination Bottom">
    <ul class="pagination mt-2">
    </ul>
  </nav>
  <input type="hidden" name="csrfmiddlewaretoken" value="Lmg6TuxnrbIUmzlSWISTlmVrGIyxn2bcANIZHZlnbVbPkXAPhqRCG1TWef1RFCnS">
  <div class="row myrow-header">
    <div class="col-sm-1">
      <input type="checkbox" name="checkall" value="1">
    </div>
    <div class="col-sm-3">
      <strong>Name</strong>
    </div>
    <div class="col-sm-8">
      <strong>Description</strong>
    </div>
    <div class="col-sm-3">
      <strong>Range</strong>
    </div>
    <div class="col-sm-2">
      <strong>Unit</strong>
    </div>
    <div class="col-sm-5">
      <strong>Unit Description</strong>
    </div>
    <div class="col-sm-2">
      <strong>Actions</strong>
    </div>
  </div>
  <div class="row myrow-striped">
    <div class="col-sm-1">
      <input type="checkbox" name="checks[]" value="">
    </div>
    <div class="col-sm-3">
      <div class="betransform">
        HbA1c
      </div>
    </div>
    <div class="col-sm-8">
      <div class="betransform">
        Glycosylated Hemoglobin
      </div>
    </div>
    <div class="col-sm-3">
      <div class="betransform">
        &lt;7
      </div>
    </div>
    <div class="col-sm-2">
      <div class="betransform">
        %
      </div>
    </div>
    <div class="col-sm-5">
      <div class="betransform">
        percentage
      </div>
    </div>
    <div class="col-sm-2">
      <button class="btn btn-primary editrow">Edit</button>
    </div>
  </div>
  <div class="row myrow-striped">
    <div class="col-sm-1">
      <input type="checkbox" name="checks[]" value="">
    </div>
    <div class="col-sm-3">
      <div class="betransform">
        S.Cr
      </div>
    </div>
    <div class="col-sm-8">
      <div class="betransform">
        Serum Creatinine
      </div>
    </div>
    <div class="col-sm-3">
      <div class="betransform">
        &lt;1.2
      </div>
    </div>
    <div class="col-sm-2">
      <div class="betransform">
        mg/dL
      </div>
    </div>
    <div class="col-sm-5">
      <div class="betransform">
        milligram per decilitre
      </div>
    </div>
    <div class="col-sm-2">
      <button class="btn btn-primary editrow">Edit</button>
    </div>
  </div>
  <nav aria-label="Pagination Bottom">
    <ul class="pagination mt-2">
    </ul>
  </nav>
  <div class="row">
    <div class="col-md-3 mb-1">
      <button class="btn btn-primary btn-block" id="delete_selected_billitems" type="submit">Delete selected billitems</button>
    </div>
  </div>
</div>

JS：

$("document").ready(function() {
  $('body').on('click', '.editrow', function() {
    $(this).closest('div.row').children('div.betransform').each(function() {
      value = $(this).html().trim();
      newhtml = `<input class="form-control cetransform" type="text" placeholder="range" value="` + value + `">`
      $(this).replaceWith(newhtml);
    });
    return false
  });
});

Answer 1

您需要改用功能$.find()，因为您需要查找嵌套元素而不是直接子元素：

$(this).closest('div.row').find('div.betransform')
                           ^

$("document").ready(function() {
  $('body').on('click', '.editrow', function() {
    $(this).closest('div.row').find('div.betransform').each(function() {
      value = $(this).html();
      value = value.trim();
      newhtml = `
          <input class="form-control cetransform" type="text" placeholder="range" value="` + value + `">
        `
      $(this).replaceWith(newhtml);
    });
    return false
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /><div class="container">  <nav aria-label="Pagination Bottom">    <ul class="pagination mt-2">    </ul>  </nav>  <input type="hidden" name="csrfmiddlewaretoken" value="Lmg6TuxnrbIUmzlSWISTlmVrGIyxn2bcANIZHZlnbVbPkXAPhqRCG1TWef1RFCnS">  <div class="row myrow-header">    <div class="col-sm-1">      <input type="checkbox" name="checkall" value="1">    </div>    <div class="col-sm-3">      <strong>Name</strong>    </div>    <div class="col-sm-8">      <strong>Description</strong>    </div>    <div class="col-sm-3">      <strong>Range</strong>    </div>    <div class="col-sm-2">      <strong>Unit</strong>    </div>    <div class="col-sm-5">      <strong>Unit Description</strong>    </div>    <div class="col-sm-2">      <strong>Actions</strong>    </div>  </div>  <div class="row myrow-striped">    <div class="col-sm-1">      <input type="checkbox" name="checks[]" value="">    </div>    <div class="col-sm-3">      <div class="betransform">        HbA1c      </div>    </div>    <div class="col-sm-8">      <div class="betransform">        Glycosylated Hemoglobin      </div>    </div>    <div class="col-sm-3">      <div class="betransform">        &lt;7      </div>    </div>    <div class="col-sm-2">      <div class="betransform">        %      </div>    </div>    <div class="col-sm-5">      <div class="betransform">        percentage      </div>    </div>    <div class="col-sm-2">      <button class="btn btn-primary editrow">Edit</button>    </div>  </div>  <div class="row myrow-striped">    <div class="col-sm-1">      <input type="checkbox" name="checks[]" value="">    </div>    <div class="col-sm-3">      <div class="betransform">        S.Cr      </div>    </div>    <div class="col-sm-8">      <div class="betransform">        Serum Creatinine      </div>    </div>    <div class="col-sm-3">      <div class="betransform">        &lt;1.2      </div>    </div>    <div class="col-sm-2">      <div class="betransform">        mg/dL      </div>    </div>    <div class="col-sm-5">      <div class="betransform">        milligram per decilitre      </div>    </div>    <div class="col-sm-2">      <button class="btn btn-primary editrow">Edit</button>    </div>  </div>  <nav aria-label="Pagination Bottom">    <ul class="pagination mt-2">    </ul>  </nav>  <div class="row">    <div class="col-md-3 mb-1">      <button class="btn btn-primary btn-block" id="delete_selected_billitems" type="submit">Delete selected billitems</button>    </div>  </div></div>

转换同一行中特定类的所有元素

1 个答案: