jQuery函数不是一个函数 - 怎么样？

Question

我是jQuery的新手,我正在尝试编写一个删除所有空p标签,span标签,强标签以及仅包含''的p和span标签的函数.我成功地写了它,但只是以非常"潮湿"的方式:

$('p').filter(function() {
 return ($(this).html().trim() == ' ');
}).remove();
$('span').filter(function() {
 return ($(this).html().trim() == ' ');
}).remove();
$('span').filter(function() {
 return ($(this).html().trim() == '');
}).remove();
$('strong').filter(function() {
 return ($(this).html().trim() == '');
}).remove();
$('p').filter(function() {
 return ($(this).html().trim() == '');
}).remove();

这是它使用的代码:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='test'>
<p>text</p>
<p>&nbsp;</p>
<p>text</p>
<p><span>text</span></p>
<p><span></span></p>
<p>text</p>
<p></p>
<p>&nbsp;</p>
<p>text</p>
<p>&nbsp;</p>
<p><span>text</span></p>
<p></p>
<p><span></span></p>
<p>text</p>
</div>

我尝试使用下面的函数重写代码,但失败了,告诉我'$(...).clean不是函数':

function clean() {
    return $(this).filter(function() {
 return ($(this).html().trim() == ' ');
}).remove();
}
$('p').clean();
$('span').clean();

其他类似的帖子建议添加(jQuery);,但这也没有用.

有人可以解释我在这里做错了什么,以及如何解决它？或者是否有更干燥的解决方案呢？我宁愿写更少的代码行.另外,快速问题 - 当函数在上面的另一个函数内时,可以使用2个返回语句,还是只使用1个？感谢您的帮助.

Answer 1

为了在jQuery对象上调用自定义函数,您应该将函数分配给$.fn.<fnName>:

$.fn.clean = function() {
  return $(this).filter(function() {
    return ($(this).html().trim() == ' ');
  }).remove();
}
$('p').clean();
$('span').clean();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='test'>
  <p>text</p>
  <p>&nbsp;</p>
  <p>text</p>
  <p><span>text</span></p>
  <p><span></span></p>
  <p>text</p>
  <p></p>
  <p>&nbsp;</p>
  <p>text</p>
  <p>&nbsp;</p>
  <p><span>text</span></p>
  <p></p>
  <p><span></span></p>
  <p>text</p>
</div>

一个独立的函数声明,如

function clean(arg) {

只会通过语法调用

clean(arg)

没有任何事情clean.您可以clean作为回调传递给each:

function clean() {
  return $(this).filter(function() {
    return ($(this).html().trim() == ' ');
  }).remove();
}
$('p').each(clean);
$('span').each(clean);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='test'>
  <p>text</p>
  <p>&nbsp;</p>
  <p>text</p>
  <p><span>text</span></p>
  <p><span></span></p>
  <p>text</p>
  <p></p>
  <p>&nbsp;</p>
  <p>text</p>
  <p>&nbsp;</p>
  <p><span>text</span></p>
  <p></p>
  <p><span></span></p>
  <p>text</p>
</div>

或者,通过调用clean回调而不是clean作为回调传递:

function clean(element) {
  return $(element).filter(function() {
    return ($(this).html().trim() == ' ');
  }).remove();
}
$('p').each(function() {
  clean(this);
});
$('span').each(function() {
  clean(this)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='test'>
  <p>text</p>
  <p>&nbsp;</p>
  <p>text</p>
  <p><span>text</span></p>
  <p><span></span></p>
  <p>text</p>
  <p></p>
  <p>&nbsp;</p>
  <p>text</p>
  <p>&nbsp;</p>
  <p><span>text</span></p>
  <p></p>
  <p><span></span></p>
  <p>text</p>
</div>