Question

考虑：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Foo</td>
      <td>
        <p>
          <span><input type="checkbox" disabled="disabled" checked="checked">1 </span>
          <span><input type="checkbox" disabled="disabled"> 2</span>
          <span><input type="checkbox" disabled="disabled"> 3</span>
        </p>
      </td>
    </tr>
    <tr>
      <td>Bar</td>
      <td>
        <p>
          <span><input type="checkbox" disabled="disabled" checked="checked"> A</span>
          <input type="checkbox" disabled="disabled"> B
        </p>
      </td>
  </tbody>
</table>

使用jQuery，如何仅保留具有属性<span>的{{1}}的{{1}}？基本上，最后我只需要以下HTML：

input

请注意，出于某种原因，checked的{{1}}并非故意包裹在<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tbody> <tr> <td>Foo</td> <td> <p> <span><input type="checkbox" disabled="disabled" checked="checked">1 </span> </p> </td> </tr> <tr> <td>Bar</td> <td> <p> <span><input type="checkbox" disabled="disabled" checked="checked"> A</span> </p> </td> </tbody> </table>周围（我没有编写HTML）。另外，假设选中的输入将始终在B之内。

最后，我需要没有（匿名）功能的单行jQuery命令，因为我使用的工具仅支持单行jQuery语句。我最终只想提取此HTML的Bar，因此我想删除未选中相应输入的文本。

我最接近的是 <span>（无效）

Answer 1

一行？？？ might这可能是不可能的

$(document).ready(function(){

  $("table tr td p").each(function(){
  
    var html = "";
    $(this).find('span').each(function(){
      if($(this).has('input[checked="checked"]').length){
        html += '<span>'+$(this).html()+'</span>';
      }
    });
    $(this).html(html);
    
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Foo</td>
      <td>
        <p>
          <span><input type="checkbox" disabled="disabled" checked="checked">1 </span>
          <span><input type="checkbox" disabled="disabled"> 2</span>
          <span><input type="checkbox" disabled="disabled"> 3</span>
        </p>
      </td>
    </tr>
    <tr>
      <td>Bar</td>
      <td>
        <p>
          <span><input type="checkbox" disabled="disabled" checked="checked"> A</span>
          <input type="checkbox" disabled="disabled"> B
        </p>
      </td>
  </tbody>
</table>

Answer 2

更新后的答案，用于尝试处理未包装在<span>中的输入。

// Finds all checked input
var $targets = $('body').find('input:checked');

// Loop over each input
$($targets).each(function(){

    // If the parent isn't a span, then false
    var parent_span = ($(this).parent().is('span')) ? $(this).parent() : false;

    // If parent span is not false, empty the closest p and append the span, otherwise remove spans from parent p
    (parent_span !== false) ? $(this).closest('p').empty().append(parent_span) : $(this).closest('p').find('span').remove();

})

如果您将另一个未包装在<span>中的输入添加到容器中，则此方法会崩溃。我知道您说过的就是HTML的用法，但理想情况下应该是一致的。

Here's an update jsfiddle。

使用jQuery清空除特定元素以外的所有内容的最佳方法？

2 个答案: