Question

我的ul列表中包含大量li，而且我的隐藏在li以下的输入类型。

我想要动态删除或设置display none给li那些旁边没有隐藏input的{{1}}。

我怎样才能实现这一目标？

这是我的代码：

＆＃13;

$('#q li:last-child').remove();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="q">
<li><a class="PageNumber" data-href="home.htm">1</a></li>
<input type="hidden" value="1" class="page" />
<li><a class="PageNumber" data-href="home.htm">2</a></li>
<input type="hidden" value="2" class="page" />
<li><a class="PageNumber" data-href="home.htm">3</a></li>
</ul>

＆＃13;

Answer 1

你可以迭代li并检查旁边是否有输入，如果没有则隐藏它。像这样的东西：

$('#q li').each(function(){
if(!$(this).next('input').length)
    $(this).hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="q">
<li><a class="PageNumber" data-href="home.htm">1</a></li>
<input type="hidden" value="1" class="page" />
<li><a class="PageNumber" data-href="home.htm">2</a></li>
<input type="hidden" value="2" class="page" />
<li><a class="PageNumber" data-href="home.htm">3</a></li>
</ul>

Answer 2

你不应该在ul中使用输入标签。 HTML形成不正确！

＆＃13;

$(document).ready(() => {
setTimeout(()=>{
    a = $("#q").find("li").last().remove();
   $("#output").html(a)
}, 2000)

})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="q">
<li><a class="PageNumber" data-href="home.htm">1</a></li>
<input type="hidden" value="1" class="page" />
<li><a class="PageNumber" data-href="home.htm">2</a></li>
<input type="hidden" value="2" class="page" />
<li><a class="PageNumber" data-href="home.htm">3</a></li>
</ul>
Removed element <div id="output"> - </div>

＆＃13;

Answer 3

这是一个JS解决方案。

const list = document.getElementById('q').children

for (let i = 0; i < list.length; i++) {
  if (list[i].tagName === 'LI') {
    if (list[i+1] === undefined || list[i+1].tagName !== 'INPUT') {
      list[i].style.display = 'none'
    }
  }
}

<ul id="q">
  <li><a class="PageNumber" data-href="home.htm">1</a></li>
  <input type="hidden" value="1" class="page" />
  <li><a class="PageNumber" data-href="home.htm">2</a></li>
  <input type="hidden" value="2" class="page" />
  <li><a class="PageNumber" data-href="home.htm">3</a></li>
  <input type="hidden" value="2" class="page" />
  <li><a class="PageNumber" data-href="home.htm">4</a></li>
  <input type="hidden" value="2" class="page" />
  <li><a class="PageNumber" data-href="home.htm">5</a></li>
  <li><a class="PageNumber" data-href="home.htm">6</a></li>
</ul>

Answer 4

马克错了。李只是UL的孩子
将输入放入li。
然后使用:has()

描述：选择包含至少一个与指定选择器匹配的元素的元素。

＆＃13;

$('#q li:not(:has(input))').hide();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="q">
  <li><a class="PageNumber" data-href="home.htm">1</a>
  <input type="hidden" value="1" class="page" />
  </li>
  
  <li><a class="PageNumber" data-href="home.htm">2</a>
  
  <input type="hidden" value="2" class="page" />
  </li>
  
  <li><a class="PageNumber" data-href="home.htm">3</a></li>
</ul>

＆＃13;

根据特定条件删除ul中的最后一个元素

4 个答案: