タグのないテキストにclassを付与

Question

<div class=wrap>

「classをつけたいテキスト1」
<img src='画像パス'>
「classをつけたいテキスト2」
<img src='画像パス'>
テキストテキストテキストテキスト....

</div>

上記の「classをつけたいテキスト1」「classをつけたいテキスト2」を装飾したく、classを付与したいのですがうまく出来ずに困っています。

   jQuery(function($) {
        $('.wrap').prepend('<div class='txt1'>');
        $('.wrap img:nth-of-type(1)').before('</div>');
        $('.wrap img:nth-of-type(1)').after('<div class='txt2'>');
        $('.wrap img:nth-of-type(2)').bofore('</div>');
    });

上記を試したのですが、最初のclass「txt1」が勝手に<div class='txt1'></div>とタグが閉じられてしまい、だめでした。

初心者の質問で申し訳ないです、どなたかご指導頂けたら嬉しいです。

Answer 1

こんにちは

以下でどうでしょう？

  $(".wrap")
    .contents()
    .filter(
      function() { 
        return this.nodeType === Node.TEXT_NODE; 
      }
    ).wrap(
      function(i) {
        return `<div class="txt${i+1}"/>`;
      }
    );

• 動作確認用 CodePen: https://codepen.io/jun68ykt/pen/OJJXNMO

参考になれば幸いです。

Comments

[0001]

ベストアンサーが選ばれていなかったようで、遅くなりすみません、完璧に再現できました！ありがとうございました！！

[jun68ykt]

どういたしまして。
> 完璧に再現できました！
とのことで、よかったです ????

Answer 2

こんな感じの処理になります
(jQueryっぽく修正してあります)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $($('.wrap').get(0).childNodes).filter(function(){
    return $(this).get(0).nodeName=="#text" && !$(this).get(0).nodeValue.match(/^\s+$/);
  }).each(function(x){
    $(this).wrap(`<span class="txt${x+1}">`);
  });
});
</script>
<div class="wrap">
「classをつけたいテキスト1」
<img src='画像パス'>
「classをつけたいテキスト2」
<img src='画像パス'>
<span>「classをつけないテキスト」</span>
<img src='画像パス'>
テキストテキストテキストテキスト....
</div> 

Comments

[0001]

有り難うございます、僕には難しすぎるコードですが、、、試したのですがうまく行きませんでした。
うまくいかない原因が何かも分からず、すみません。

[yambejp]

> うまく行きません

jQueryを読んでないのでは？
一応調整しておきます

Answer 3

残念ながら、jQueryでは完成形のHTMLしか生成できませんので、<div>の開きタグだけ挿入する、というような芸当はできません。

いちおう、テキストノードを拾ってそれをタグに書き換える、というような方法は考えられますが、それより元のHTMLを書き換えておく、という対応のほうが手っ取り早いのは間違いないです（HTMLを書き換えられない事情はありますでしょうか）。

Comments

[0001]

有り難うございます！
勉強不足ですみません、「テキストノードを拾ってそれをタグに書き換える」という仕様が僕には分からないのですが、「classをつけたいテキスト1」「classをつけたいテキスト2」を拾って、タグの付いたテキストに書き換える、ということでしょうか。
「HTMLを書き換えられない事情」は全くなく、「classをつけたいテキスト1」「classをつけたいテキスト2」にclassが付けばそれで良いです！

[maisumakun]

HTMLを書き換えられない事情がまったくない状況であれば、JavaScriptで処理せずに、<span class="foo">classをつけたいテキスト1</span>と書いておけばいいだけの話です。

[0001]

「HTMLを書き換えられない事情」はそのようなことだったのですね！僕の理解不足ですみません。
wrap内の内容はイレギュラーなためこちらでは操作が出来ないのです。