从HTML元素及其所有子元素

时间:2017-02-09 14:06:29

标签: javascript jquery html

在下面的代码中,我想从具有类" card-back"的元素中的所有HTML标记中删除所有属性,类等,因此结果是裸标记( +内容)。 我看了herehere,但无法让它发挥作用。 到目前为止,这是我的代码:



$.fn.removeAttributes = function(only, except) {
  if (only) {
    only = $.map(only, function(item) {
      return item.toString().toLowerCase();
    });
  };
  if (except) {
    except = $.map(except, function(item) {
      return item.toString().toLowerCase();
    });
    if (only) {
      only = $.grep(only, function(item, index) {
        return $.inArray(item, except) == -1;
      });
    };
  };
  return this.each(function() {
    var attributes;
    if (!only) {
      attributes = $.map(this.attributes, function(item) {
        return item.name.toString().toLowerCase();
      });
      if (except) {
        attributes = $.grep(attributes, function(item, index) {
          return $.inArray(item, except) == -1;
        });
      };
    } else {
      attributes = only;
    }
    var handle = $(this);
    $.each(attributes, function(index, item) {
      handle.removeAttr(item);
    });
  });
};


$('.card_back').removeAttributes(null, null).filter(function() {
  var data = $(this);
  back = data.html().trim();
  alert(back);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card_wrapper">
  <div class="card_navigation">
    zurück |
    <a title="Titletext" href="/xyz">next</a> </div>
  <div class="card_front">
    <span class="info">Front</span>
    <p>here's just some text
      <br>and one more line.
    </p>
    <p>here's just another text
      <br>and one more line.
    </p>
  </div>
  <div class="card_back">
    <span class="info">Back</span>
    <p class="test"><span id="test3">Lorem Ipsum non dolor <strong>nihil est major</strong>, laudat amemus hibitet</span></p>
    <p><span style="color: red">- <strong>Non solum</strong>, sed calucat ebalitant medetur</span></p>
    <p>&nbsp;</p>
  </div>
</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

正如this response中所指出的,您可以扩展removeAttr以不占用任何参数并删除所有属性。

当心,你将从内部图像中删除SRC属性!!!

然后与removeClass配对(已经不能使用params)并且每个元素上的循环给出了这个:

var removeAttr = jQuery.fn.removeAttr;
jQuery.fn.removeAttr = function() {

  if (!arguments.length) {
    this.each(function() {

      // Looping attributes array in reverse direction
      // to avoid skipping items due to the changing length
      // when removing them on every iteration.
      for (var i = this.attributes.length -1; i >= 0 ; i--) {
        jQuery(this).removeAttr(this.attributes[i].name);
      }
    });

    return this;
  }

  return removeAttr.apply(this, arguments);
};

$('.card_back').find('*').each(function( index, element ) {
  $(element).removeClass();
  $(element).removeAttr();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card_wrapper">
  <div class="card_navigation">
    zurück |
    <a title="Titletext" href="/xyz">next</a> </div>
  <div class="card_front">
    <span class="info">Front</span>
    <p>here's just some text
      <br>and one more line.
    </p>
    <p>here's just another text
      <br>and one more line.
    </p>
  </div>
  <div class="card_back">
    <span class="info">Back</span>
    <p class="test"><span id="test3">Lorem Ipsum non dolor <strong>nihil est major</strong>, laudat amemus hibitet</span></p>
    <p><span style="color: red">- <strong>Non solum</strong>, sed calucat ebalitant medetur</span></p>
    <p>&nbsp;</p>
  </div>
</div>