のは、以下の私が持っているとしましょう：スパンが別のスパンの親であるかどうかをチェックしてから、子スパンを破棄する方法？
こんにちは、私の
<span class='green_mark'>の名前はボブ</span><span class='red_mark'>です。</span>さんはどんな人ですか？
この例では、green_markはすでにred_markの内容をカバーしています。スパンの親がスパンの子をカバーするかどうかを検出する方法はありますか？次に、子供であるスパンを破壊しますか？
この場合、.green_markは親、.red_markは子供です。したがって、私は.red_markを破壊したい。
注：私はJSで強調表示していますが、PHP経由でデータを送信しています。したがって、このソリューションは、JSまたはPHPのどちらでもかまいません。
これを試してみてください：
$(document).ready(function() {
$("span.green_mark>span.red_mark").each(function() {
var elem = $(this);
var text = elem.text();
elem.replaceWith(text);
});
});
それとも
$(document).ready(function() {
$("span.green_mark span.red_mark").each(function() {
var elem = $(this);
var text = elem.text();
elem.replaceWith(text);
});
});
をデモ：http://jsfiddle.net/GCu2D/1502/
秒1は任意のためのものである最初のコードはgreen_markの即時red_mark子供のために働きますred_mark内の子供green_mark
私はまだ単語自体がほしい、私は強調表示を削除したいだけです... –
@GreatDayTodayアップデートを確認 –
jQueryでこれを行うことができますね。
$('span.green_mark').find('span').remove()
優れたアプローチ。問題は、 '.green_mark'が必ずしも親であるとは限らず、' .yellow_mark'である可能性があるということです。したがって、私はこのソリューションを特定のスパンではなく、親に基づいて構築する必要があります。同じように、子は '.red_mark'だけでなく、どんな色でもかまいません。 –
あなたが直接子供であるspanタグ削除したい場合は、次の
$(document).ready(function(){
$("button").on("click",function(){
$("span").children().remove("span");
})
})
決勝コード：スパンの子供、孫を、削除したい場合は
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<span>I am Parent.<span>I am Children</span></span>
<br><br>
<button>Remove</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").on("click",function(){
$("span").children().remove("span");
})
})
</script>
</body>
</html>を... 。
$(document).ready(function(){
$("button").on("click",function(){
$("span").find("span").remove();
})
})
決勝コード：
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<span>I am Parent.
<div>I am div
<span>I am grandChild</span>
</div>
</span>
<br><br>
<button>Remove</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").on("click",function(){
$("span").find("span").remove();
})
})
</script>
</body>
</html>次のコードは、そのクラス名でで_markを含むすべてのスパン要素をアンラップでしょう。親がred_mark、yellow_mark、rainbow_markだったかどうかに関わらず。
$("span[class*=_mark] span[class*=_mark]").contents().unwrap();
https://jsfiddle.net/sx07La3h/
開始HTML：
<span> Hi, my <span class='green_mark'> name is <span class='red_mark'>Bob <span class='yellow_mark'>Smith</span></span>. How are </span> you doing?</span>
エンディングHTML：
<span> Hi, my <span class="green_mark"> name is Bob Smith. How are </span> you doing?</span>
DOMツリーです。すべてのツリーノードは、その親/子孫が何であるかを知っています。 "red_mark"ノードを見つけ、ツリーの上に移動し始めます。上に到達して "green_mark"が見つからない場合、それらはネストされていません。 –
@MarcBスパンは動的でハイライトに基づいています。彼らは複数の色があるので、私は特定のスパンを探したくありません。私は親の子供を見つけることができます。なぜなら、彼らはテキストの1回の通過で複数の親の子関係になる可能性があるからです... –
は関係ありません。それはまだ木です。あなたの特定の条件が満たされていないかどうかを調べるために、ツリーをたどり、それに基づいて何かをします。 –