Question

如果另一个div有多个子元素，我显示一个thiw的内容有问题。

这是结构：

<pharpackage ...  signature="sha512"> ...

因此，如果tbody只有一个孩子，那么显示.element1。

我用css3尝试了很多东西，但我无法完成它。

谢谢

Answer 1

因此，如果tbody只有一个孩子，那么显示.element1。

我将假设下半部分是“......否则隐藏它。”

你可以这样做：

$(".element1").toggle($("selector-for-the-table tbody").children().length === 1);

当表的内容可能已更改时，您需要触发该代码。你可以在任何现代浏览器上使用mutation observer来做到这一点。在稍微不那么现代的浏览器上，您可以找到使用旧的弃用突变事件模拟足够突变观察者的polyfill /垫片。在非常古老的浏览器上，你必须进行民意调查。

以下是观察tbody变化的变异观察者的示例：

// Watch for changes
var ob = new MutationObserver(function() {
  // A change may have occurred
});
ob.observe($("selector-for-the-table tbody")[0], {
  childList: true,
  subtree: true
});

直播示例：

// Function that does the update
function updateElement1() {
  $(".element1").toggle($("#the-table tbody").children().length === 1);
}

// Initial call
updateElement1();

// Watch for changes
var ob = new MutationObserver(updateElement1);
ob.observe($("#the-table tbody")[0], {
  childList: true,
  subtree: true
});

// Change it once a second for 10 seconds
var counter = 0;
var timer = setInterval(function() {
  var tbody = $("#the-table tbody");
  if (tbody.children().length === 1) {
    // Add one
    tbody.append("<tr><td>Second row added " + new Date().toISOString() + "</td></tr>");
  } else {
    // Remove one
    tbody.children().last().remove();
  }
  if (++counter >= 10) {
    clearInterval(timer);
    $("<p>").html("Done").appendTo(document.body);
  }
}, 1000);

<div class="element1">I'm element 1</div>
<table id="the-table">
  <tbody>
    <tr>
      <td>First row</td>
    </tr>
  </tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

if ($('tbody tr').length > 1) {
    $('.element1').show();
}

但是@ T.J。克劳德的评论是正确的。

我希望它有所帮助。

如果tbody有多个子节点，请添加show element1

2 个答案: