Question

我目前正在Ionic中构建一个应用程序，我需要隐藏一些区域空白，内部有一些空白区域。我可以使用jQuery执行此操作，如下所示。

    jQuery('.course p').filter(function() {

      return $.trim($(this).text()) === ''

    }).remove();

我导入了一个custom.js文件，但似乎没有发生任何事情？有一个更好的方法吗？如果是的话，请给我一些建议。

谢谢！

Answer 1

我在代码段中添加了三个p元素 - 一个带有空格，一个带有非空格，另一个带有文本。然后函数遍历每个 - 在修剪它之后确定是内容以去除空白并且tehn add删除它。剩下的只是带有内容的单个p元素 - 请注意，我已经在p＆＃39;显示它们的元素。

我刚刚放入一个按钮，以便初始状态可以看作是三个p元素，然后点击按钮 - 两个被移除。

第一个p是essentailly带边框的折叠div - 所以它最初显示为粗线，第二个p是nbsp并显示为空框 - 然后最后一个是带文本的那个。这是唯一一个在单击按钮后保留的内容。

＆＃13;

$(document).ready(function(){
  $('#trimButton').click(function(){
      $('.course p').each(function(){
        if($(this).text().trim() === ''){
          $(this).remove();}
       })
    })
  })

＆＃13;

.course p{border:solid 1px red; margin-bottom:10px}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="course">
  <p> </p>
  <p>&nbsp;</p>
  <p> test</p>
</div>
<hr/>
<button type="button" id="trimButton">click me to remove the empty p elements</button>

＆＃13;

Answer 2

从我的检查中，您的代码应该可以正常工作;

$('#trim').click(function(){
	jQuery('.course p').filter(function() {
	
	  return $.trim($(this).text()) === ''
	
	}).remove();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="course" >
<p style="border:solid 1px red; margin-bottom:10px"> </p>
<p style="border:solid 1px red; margin-bottom:10px">&nbsp;</p>
<p style="border:solid 1px red; margin-bottom:10px">this is </p>
<p style="border:solid 1px red; margin-bottom:10px"> this</p>
</div>
<button type="button" id="trim">Clear Empty Elements</button>

导入js文件的方式可能是一个问题，或者jquery选择器可能找不到该元素，因为它名称不正确？

或者，由于您使用的是angularjs，因此应考虑使用ng-if

ng-if="*yourDataSource*.name.indexOf(' ') !== -1"

或自ES2015起

ng-if="*yourDataSource*.includes(' ')"

隐藏元素，如果为空或内部有空白（Ionic 2）

2 个答案: