3

この質問を投稿することは非常に恥ずかしいですが、その必要性のために Jquery で unwrap または replaceWith メソッドを使用することができませんでした。

私の問題は単純です。これらのノードの子を失うことなく、html コードのいくつかのノード (jquery セレクター) を削除する必要があります。

これは、私の目標に到達するために使用された見苦しいコードの結果を示す Jsfiddle ですhttps://jsfiddle.net/uddaeh1u/15/ (はい、動作します...)

// var content : the html source code of the wysiwyg

var result = '';
$(content).contents().each(function(){
    var addContent = '';
    // textNode
    if(this.nodeType == 3) {
        // Text Node
        result+= $(this).text();
    } else if(this.nodeType == 1 && $(this).hasClass('atwho-inserted')) {
        // if is an Object Node with the target class
        // I only keep it's contents (means that ".atwho-inserted" is not kept)
        result+= $(this).html();
    } else {
        // in any other case I keep it entirely
        result+= this.outerHTML;
    }
});

(unwrap メソッドを使用して) 本当に良いコードを見つけてもらえますか?

本当にありがとうございました ：）

4

4 に答える 4

1

子を除いて削除するだけspan.atwho-insertedで、残りの DOM は同じままである場合は、次の方法で削除できます。

$('.start .atwho-inserted').children(':first-child').unwrap();

まず、 class を持つ要素を選択してから.atwho-inserted、それぞれの最初の子を見つけて perform を実行しますunwrap。

unwrapセレクターの直接の親ラッパーを削除し、子を残します。

そして、あなたは行ってもいいです！

于 2016-11-10T11:43:50.970 に答える
0

基本的には、 （unwrap）チェックouterHTMLで置き換えたいものですhttps://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML#Browser_compatibilityinnerHTML

$('#trigger').click(function() {
  $(this).hide();
  $('.atwho-inserted').each(function() {
    this.outerHTML = $(this).html();
  });
});
body{
  padding:10px;
}

.atwho-inserted{
  background-color:red;
}

pre code, .wrap{
  white-space: pre-line;
}

#trigger {
  font-size: 1.5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="trigger">Click to trigger edition</button>

<div class="container">
  <div class="row">
    <div class="col-xs-6">
      <div class="well">All selectors ".atwho-inserted" are in "background-color:red" and have to be removed without losing its children.</div>
      <div class="start">
        <p>
          <span class="atwho-inserted" data-atwho-at-query="@fac" contenteditable="false">
            <span class="user_mention" data-identifier="8930">@facticeuserr</span>
          </span>
          <br /> some lorem ipsum text
          <span class="atwho-inserted" data-atwho-at-query="#acc" contenteditable="false">
            <span class="tag_mention" data-identifier="484">#accessibilité</span>
          </span>
          <br>
          <img src="http://lorempixel.com/100/100/" data-filename="3">
          <br />
          <b>hello</b>
          <br>
          <span class="atwho-inserted" data-atwho-at-query="#acc" contenteditable="false">
            <span class="tag_mention" data-identifier="653">#Accompagnement</span>
          </span>
        </p>
      </div>
      <pre class="startCode"><code></code></pre>
    </div>
    <div class="col-xs-6">    
      <div class="well">Here the result<br /> it's works but code is not optimized</div>
      <div class="result"></div>
      <pre class="resultCode"><code></code></pre>
    </div>
  </div>
</div>

于 2016-11-10T11:24:43.760 に答える