2つのHTML要素の間でテキストをスキャンし、それらを.wrapAll（）関数でラップする

フォーラムWebページで作業していますが、Webページ内のHTMLを編集することはできません。私は上に乗るまでテキストを隠したい。これは大まかなHTMLコードの例です：私は.nextUntil（）と.wrapAll（）関数があることを知っている2つのHTML要素の間でテキストをスキャンし、それらを.wrapAll（）関数でラップする

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>nextUntil demo</title> 
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
</head> 
<body> 
<dl> 
    <dd class="postprofile-info"> 
     <span> 
      <span> 
       <img src="image here"> 
      </span> 
     </span> 
     "This is the text I want to surround in a div" 
     <br> 
     <span class="label"></span> 
     "Text from here on out can be ignored" 
     <br> 
    </dd> 
<dl> 
</body> 
</html>

が、私はちょうどそれが正常に動作させることはできません。私が遭遇したもう一つの問題は、タグと
タグの間の情報を比較して、divに必要なテキストだけを折り返すことです。私の目標は、divにテキストをラップして、クラスに与え、CSSを使って操作することです。

編集1：私はのみ.nextUntil（）と.wrapAllを（）を利用した断片をテストしてきたので、 、私は任意のJSを提供しなかった理由です。これは私が持っているすべてであり、それはこまごまとしている：

（ただこれは:)

$(".postprofile-info").nextUntil("dt").css("background-color", "red");

（別のテスト）

$('form > span').each(function(){ 
    $(this).next('p').andSelf().wrapAll('<div class="test"/>'); 
});

（別をうまくいくかどうかを確認するためにテストしますテスト）

出典

2017-10-01 Corbin

_「正しく動作させることができません」_：問題の原因を確認できるように、試したJSを追加する必要があります。また、「」タグはありませんか？ – Andy

テキストノードをラップしようとしています。それは見つからないほど簡単ではない。しかし、このようなものは、トリックを行います。

$('dl > dd').each(function(index){ 
 
    var textNode = $(this).contents().get(2).nodeValue; 
 
    console.log(textNode); 
 
    var newHtml = $(this).html().replace(textNode,'<div class="new">'+textNode+'</div>'); 
 
    $(this).html(newHtml); 
 
});

.new { 
 
    border: solid 3px green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<dl> 
 
    <dd class="postprofile-info"> 
 
    <span> 
 
     <span> 
 
      <img src="image here"> 
 
     </span> 
 
    </span> 
 
    "This is the text I want to surround in a div" 
 
    <br> 
 
    <span class="label"></span> 
 
    "Text from here on out can be ignored" 
 
    <br> 
 
    </dd> 
 
</dl>

注：これは、マークアップ、.get(2)の特に原因を変更した場合、そのテキストノードがその位置に正確である必要があります動作しません。

出典

2017-10-01 09:13:08 caramba

ありがとう！ – Corbin

2つのHTML要素の間でテキストをスキャンし、それらを.wrapAll（）関数でラップする

答えて

関連する問題