Question

我正在使用表单向导插件生成以下HTML

<li role="tab" class="first current" aria-disabled="false" aria-selected="true">
     <a id="form-3-t-0" href="#form-3-h-0" aria-controls="form-3-p-0">   
          <span class="current-info audible">current step: </span>
          <span class="number">1.</span> 
          Text I want to hide
     </a>
</li>

我想在设备小于768px时显示步骤编号。

问题在于我无法弄清楚如何隐藏/删除＆＃34;文字我想隐藏＆＃34;因为它确实如此不属于我可以直接定位的元素。

任何人都可以帮我隐藏文字而不会同时隐藏class="number"吗？我的尝试不起作用。它隐藏了数字类，即使我不告诉它。

 if($(window).width() <= 1024) {    
      $('.steps a:not(".number")').text('');
 }

Answer 1

要删除文字，请尝试：

$("#form-3-t-0").contents()
  .filter(function() {
    return this.nodeType == 3;  
}).remove();

演示:: jsFiddle

Answer 2

if($(window).width() <= 1024) {    
      var toBeAdded=$('.number');
      toBeAdded.appendTo($('.steps').text(''));
 }

Answer 3

试试这个：

var $form = $('#form-3-t-0'),
$number = $('a').find('span.number');

    $form.html('');
    $form.append($number);

这会创建一个记住您要保留的内容的变量，删除内部的所有内容并将数字返回到正确的位置。

http://codepen.io/anon/pen/bkanq

隐藏元素中的内容而不隐藏子类

3 个答案: