jqueryでの文字列操作についての質問

Question

javascript学習中の者です。
とあるショッピングカートASPを利用して、学習を進めているのですが、
こういった感じの操作が難しく悩んでいます。
どうかご教授いただけないでしょうか。

【商品一覧出力画面】

<div class="AAA"> <div class="BBB"> <a href=""><img src=""></a> </div> 商品名<br><span>価格</span> </div>

このようなhtmlが自動出力されます。
このとき「商品名＋価格」部分にCCCというclassを付けたい。
結果的には

<div class="AAA"> <div class="BBB"> <a href=""><img src=""></a> </div> <div class="CCC">商品名<br><span>価格</span></div> </div> このようなカタチにしたいと考えております。

ぜひご指導おねがいします。

Answer 1

jQuery はテキストノードAPIがほとんどないので DOM API を利用してください。

• Edit fiddle - JSFiddle

<div class="AAA">
  <div class="BBB">
    <a href=""><img src=""></a>
  </div>
  商品名<br><span>価格</span>
</div>
<div class="AAA">
  <div class="BBB">
    <a href=""><img src=""></a>
  </div>
  商品名<br><span>価格</span>
</div>
<script>
'use strict';
(function () {
  var doc = document,
      div = doc.createElement('div');

  div.className = 'CCC';

  for (var i = 0, aaas = doc.querySelectorAll('.AAA'), l = aaas.length, aaa; i < l; ++i) {
    aaa = aaas[i];

    for (var j = 0, childNodes = aaa.childNodes, m = childNodes.length, childNode, div = div.cloneNode(false); j < m; ++j) {
      childNode = childNodes[j];

      if (childNode.classList && childNode.classList.contains('BBB')) {
        while (++j < m--) {
          div.appendChild(childNodes[j]);
        }

        if (div.childNodes.length) {
          aaa.appendChild(div);
        }
        break;
      }
    }
  }
}());
</script>

(2016/02/10 23:48追記)
コードに誤りがあった為、querySelectorAll() で書き直しました。
Array.prototype.forEach を使うと次のように書けます。

• Edit fiddle - JSFiddle

'use strict';
Array.prototype.forEach.call(document.querySelectorAll('.AAA'), function (aaa) {
  var doc = aaa.ownerDocument,
      div = doc.createElement('div');

  div.className = 'CCC';

  for (var j = 0, childNodes = aaa.childNodes, m = childNodes.length, childNode, div = div.cloneNode(false); j < m; ++j) {
    childNode = childNodes[j];

    if (childNode.classList && childNode.classList.contains('BBB')) {
      while (++j < m--) {
        div.appendChild(childNodes[j]);
      }

      if (div.childNodes.length) {
        aaa.appendChild(div);
      }
      break;
    }
  }
});

Re: MizukiMinezaki さん

Comments

[MizukiMinezaki]

ありがとうございます。
なるほど、このようにタグの付いていないテキストにidやclassを挿入するのですね。
大変参考になります。

ですが実際に動かしてみると、
<span>価格</span>
<br>
<div class="CCC">商品名</div>
という結果を得ました。

最初に.AAA > .BBBと指定したからなのでしょうか。
なんだかとてもおもしろい結果です。

とても汎用的で糊代のあるコードをありがとうございます。

[MizukiMinezaki]

querySelectorAllとArray.prototype.forEachに関しても調べました。

IEの８から使えるみたいなので、これでも学習を進めたいと思います。
本当に参考になるご回答、ありがとうございます。

[think49]

失礼しました。ミスがあった為、親記事のコードを書き直しました。
for 文版、forEach 版ともに基本アルゴリズムは同じです。

[MizukiMinezaki]

返信が遅れ、申し訳ありません。
ご返信並びに再考に感謝します。
ありがとうございます。

両方のコードとも、とてもためになるものです。
しっかりと学ばせていただきたいと思います。

パターンマッチすらまだ満足にできない自分なので、もっとこちらのコードを参照して、しっかりと学ばさせていただきます。

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

Answer 2

解決してますが、こちらでも出来たので紹介します。

var $a = $('.AAA'),
    $b = $('.BBB'),
    /* $aの中から$b以外の要素を$targetとして取得 */
    $target = $a.contents().not($b),
    /* $targetを内包したCを作成 */
    $c = $('<div class="CCC">').html($target);

/* $cを$bの後ろに挿入 */
$b.after($c);

Comments

[MizukiMinezaki]

ご返信感謝します。
ありがとうございます。

とてもスマートなお答えにびっくりしています。
というのも私はまだ勉強不足のため、何故この$a = $('.AAA')で.AAAの中身が取得できるのかが分かりません。

これは、表題にある出力一覧の内容が複数あっても何故いけるのでしょうか。。。
ですが出力一覧を<li>で囲って、同じ処理をした場合には何故か動かない。
謎は深まるばかりです。。。

[yamato_hikawa]

jQueryの文法で $('selector'); の形式で取得できます。
seletorの部分はCSSで使うものと同じです。
なので、class="AAA"が設定されている要素を取得する場合は $('.AAA') となります。

それを変数「$a」に入れる記述と合わせると、 $a = $('.AAA') という形になります。

Answer 3

jQueryさんの弱点はテキストノードを扱えないことなので、なかなか大変かな、と。

$(
  Array.prototype.filter.call(
    document.getElementsByClassName('AAA')[0].childNodes,
    (function(){
      var f = false;
      return function(node){
        if (!f && node.nodeType === 1) {
          f = node.classList.contains('BBB')
        }
        return f;
      }
    })()
  ).slice(1)
).wrapAll('<div class="CCC">');

Comments

[MizukiMinezaki]

ありがとうございます。
皆さん仰る通り、やはりテキストノードの取り扱いは難しいですね。
ただ、こういった切り口もあるのですね。
とても参考になります。

AAAの中でBBBに当てはまらないものを見つけて、
最後にwrapAllするなんてこんなやり方思いつきもしませんでした。
ありがとうございます。

とても参考になるご回答、ありがとうございます。

Answer 4

ちょっと冗長な書き方になってしまいますが、これでどうでしょう。

$(".BBB").insertAfter(".AAA");
$(".BBB").after('<div class="ccc"></div>');
var aaaHtml = $(".AAA").html();
$(".ccc").append(aaaHtml);
$(".AAA").empty();
$(".BBB, .ccc").appendTo(".AAA");

Comments

[MizukiMinezaki]

ありがとうございます！

たしかに！！！
決して冗長なんてことはないです。
すごい分かりやすく理詰めされた感じです。

こういう考え方をもっとできれば、楽しくなるんだろうなって感動しました。

Answer 5

いかがですか。

<div class="AAA"> 
  <div class="BBB"> 
    <a href=""><img src=""></a> 
  </div> 
  <div>商品名<br><span>価格</span></div>
</div>

$('.BBB').next('div').addClass('ccc');

Comments

[MizukiMinezaki]

ありがとうございます。
まさに、その通りだと思うのですが、
その商品名の直前に来る<div>は手動では付けられず、
それさえ付けれたら。。。と考えています。
なにかよい案はないでしょうか。。