Question

我有锚点html控件列表。我需要隐藏特定的锚元素，它工作正常，但它的位置保持原样。

这是我的代码

$("#warnings").children("a").hide().filter(".Other").show();

Fiddle Link

我想要显示所有可见的锚应该在顶部。

Answer 1

这是因为br元素

var $as = $("#warnings").children("a");
$as.next('br').addBack().hide();
$as.filter(".Other").next('br').addBack().show();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="warnings">
  <h4>Warning(s)</h4>
  <p>Please select the warning(s) item to navigate to appropriate control</p>
  <a href="#" class="subject">Subject</a>
  <br> <a href="#" class="subject">Subject</a>
  <br> <a href="#" class="Contract">Contract</a>
  <br> <a href="#" class="Contract">Subject</a>
  <br> <a href="#" class="Contract">Contract</a>
  <br> <a href="#" class="Site">Site</a>
  <br> <a href="#" class="Site">Site</a>
  <br> <a href="#" class="Site">Site</a>
  <br> <a href="#" class="View">View</a>
  <br> <a href="#" class="View">View</a>
  <br> <a href="#" class="Other">Other</a>
</div>

另一个更简单的解决方案是使用calss

$("#warnings").children("a").addClass('hidden').filter(".Other").removeClass('hidden');

#warnings a.hidden,
#warnings a.hidden + br {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="warnings">
  <h4>Warning(s)</h4>
  <p>Please select the warning(s) item to navigate to appropriate control</p>
  <a href="#" class="subject">Subject</a>
  <br> <a href="#" class="subject">Subject</a>
  <br> <a href="#" class="Contract">Contract</a>
  <br> <a href="#" class="Contract">Subject</a>
  <br> <a href="#" class="Contract">Contract</a>
  <br> <a href="#" class="Site">Site</a>
  <br> <a href="#" class="Site">Site</a>
  <br> <a href="#" class="Site">Site</a>
  <br> <a href="#" class="View">View</a>
  <br> <a href="#" class="View">View</a>
  <br> <a href="#" class="Other">Other</a>
</div>

Answer 2

删除<br />并添加CSS：

#warnings a {
    display: block;
}

这将使所有<a>出现在他们自己的行上

隐藏子元素而不影响高度

2 个答案: