Question

如果child（span）元素为空，我想构建一个jquery支持的隐藏（li）父元素的方法。我已经建立了这样一个问题，但我不知道为什么它不起作用。

<li data-column="3" class=„parent“>   
  <span class=„childTitle">Lorem Ipsum</span>:  
  <span class="childValue"><!—child value--><!—child value--></span>  
</li>

我试图建立一个if问题：

$( document ).ready(function() {
if ($('span.childValue').is(':empty')){
$(this).parents().hide();
}     
});

我还尝试构建一个简单的函数：

$("span.childValue:empty").parent().hide();

但要么不起作用。完成的代码应构建在wordpress子主题javascript中。我尝试了不同的方法，但都没有结果。

Answer 1

我还尝试构建一个简单的函数：
 $("span.childValue:empty").parent().hide();

如果只是将包装在文档就绪处理程序中，将正常工作。

$( document ).ready(function() { $("span.childValue:empty").parent().hide(); });

（您还需要修复html中所有奇怪的引号字符。）

演示：https://jsfiddle.net/jphuftqu/

关于您使用if语句尝试的版本，这不起作用，因为this的值与其所在的函数相关联，而不是与if块相关联，所以$(this).parents()与跨度无关。

在if中，您必须使用$('span.childValue').parent()获取元素的父级，但如果您有多个相同结构的列表项，则会选择所有这些项目，这样就不是您想要的

另请注意，在您尝试的if版本中，您使用的是.parents()，这将获得该范围的所有祖先。请改用.parent()或.closest('li')。

Answer 2

修复示例代码中的奇怪引号后，您可以使用：

$('span.childValue').each(function() {
  if ($(this).is(':empty')) $(this).parent().hide();
})

<强> jsFiddle example

请注意，您要使用parent()而不是parents()来隐藏<li>

如果子span元素为空，则隐藏parent li元素

2 个答案: