javascript - 如果内容与另一个 div 匹配，则隐藏 li 项目

Question

我目前在 div“公司名称”内有内容，我还有一个包含 div“项目名称”的完整项目列表。如果“item-name”中的内容与“company-name”中的内容匹配(逐字)，那么我想显示:block;那个 li，否则 li 应该被隐藏。

此外，如果“item-name”div 为空/空白，它也应该被隐藏。

<div id="company-name">ABC Corporation</div>

<ul>

<li>Content for this item - this list item should display:block; because the item-name matches the company-name
    <ul>
        <li class="location">Australia</li>
        <li class="industry">Pharmaceuticals</li>
        <li class="item-name">ABC Corporation</li>
    </ul>
</li>

<li>Content for this item - this list item should be HIDDEN - display:block;
    <ul>
        <li class="location">Australia</li>
        <li class="industry">Pharmaceuticals</li>
        <li class="item-name">XYZ Company</li>
    </ul>
</li>

<li>Content for this item - this list item should be HIDDEN - display:block;
    <ul>
        <li class="location">Australia</li>
        <li class="industry">Pharmaceuticals</li>
        <li class="item-name">LMN Hardware</li>
    </ul>
</li>

</ul>

Answer 1

您可以迭代 item-name 元素并查看其内容是否与 company-name 匹配，如果是，则显示为

var cn = $('#company-name').text().trim();
$('li:has(li.item-name)').hide();
$('li.item-name').filter(function() {
  return $(this).text().trim() == cn;
}).parent().closest('li').show()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="company-name">ABC Corporation</div>

<ul>

  <li>Content for this item - this list item should display:block; because the item-name matches the company-name
    <ul>
      <li class="location">Australia</li>
      <li class="industry">Pharmaceuticals</li>
      <li class="item-name">ABC Corporation</li>
    </ul>
  </li>

  <li>Content for this item - this list item should be HIDDEN - display:block;
    <ul>
      <li class="location">Australia</li>
      <li class="industry">Pharmaceuticals</li>
      <li class="item-name">XYZ Company</li>
    </ul>
  </li>

  <li>Content for this item - this list item should be HIDDEN - display:block;
    <ul>
      <li class="location">Australia</li>
      <li class="industry">Pharmaceuticals</li>
      <li class="item-name">LMN Hardware</li>
    </ul>
  </li>

</ul>