Question

我在我的网站上工作，我不知道如何在表格之后隐藏h2标签。你能帮助我吗？非常感谢您的帮助。

HTML：

<h2>
  <a class="h2 dark" href="/be/ae/3_controls-training.html" name="3">Controls Training</a>
</h2>
<table class="training" cellspacing="0" width="100%" style="display: none;">
 <tbody>
   <tr>
     <th style="text-align: left;">Training</th>
     <th style="text-align: left;">Start</th>
     <th style="text-align: left;">End</th>
     <th style="text-align: left;">Location</th>
     <th style="text-align: right;">Price*</th>
     <th> </th>
   </tr>
 </tbody>
</table>
)* EUR excl. BTW

JQuery的：

<script type="text/javascript">
$(document).ready(function() {
    // this is code for hiding my table if td is not inside
    $('.training').each(function(){
       if ($(this).find('td').length == 0){
        $(this).closest('h2').hide(); // I try to hide h2 before table without success
        $(this).hide(); // this works fine
        // I don't know how to hide text after table
       }
    });
});
</script>

Answer 1

要获取DOM中的前一个元素，可以使用jQuery .prev（）http://api.jquery.com/prev/

$(this).prev().hide();

您无法选择文本，因为它不是DOM元素。将其包装在p标签中，然后您可以使用.next（）http://api.jquery.com/next/

$(this).next().hide();

示例：http://jsfiddle.net/sfctbnkz/

Answer 2

如果您可以将#text与span或div包起来，则很容易。然后，您可以使用.prev和.next选择表格前后的元素。

如果您无法访问标记..那么唯一的方法是获取内容并查找文本并将其删除..

参见下面的演示..它将不会显示任何内容..因为OP的输出是删除/隐藏所有内容。：）

注意：以下代码删除了表格后面的下一个文本节点..因此请正确测试并根据需要进行更改。

$('.training').each(function() {
  $(this).prev('h2').remove(); //remove or hide h2
  var tableSiblings = $(this).parent().contents();
  var deleteNext = false;
  $.each(tableSiblings, function(i, content) {
    if (deleteNext) {
      $(this).remove();
      deleteNext = false;
    }
    if ($(this).hasClass('training')) {
      deleteNext = true;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2>
  <a class="h2 dark" href="/be/ae/3_controls-training.html" name="3">Controls Training</a>
</h2>
<table class="training" cellspacing="0" width="100%" style="display: none;">
  <tbody>
    <tr>
      <th style="text-align: left;">Training</th>
      <th style="text-align: left;">Start</th>
      <th style="text-align: left;">End</th>
      <th style="text-align: left;">Location</th>
      <th style="text-align: right;">Price*</th>
      <th></th>
    </tr>
  </tbody>
</table>
)* EUR excl. BTW

Answer 3

试试这个

$('.training').closest( 'h2' ).hide(); // will hide closest h2 tag, but could be after
$('.training').next().hide(); // will hide element directly after .training

您应该尝试添加特定于您尝试执行的操作的类，而不是依赖于dom元素

Jquery - 如何在表之前隐藏h2并在表之后隐藏文本？

3 个答案: