【jQuery】prevAllを使って条件付きで取得したい

Question

$(this).parent('.news-wrap').prevAll('p').prependTo(this,'.news-wrap');

上記のようなコードを書いております。

HTMLは下記のようになっております。

<h3>タイトル</h3>
<p>テキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキスト</p>
<div class="news-wrap"></div>

<table>
<!-- テーブルの記述があります。 -->
</table>

<p>テキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキスト</p>
<div class="news-wrap"></div>

そして理想の結果が下記の通りです。

<h3>タイトル</h3>

<div class="news-wrap">
<p>テキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキスト</p>
</div>

<table>
<!-- テーブルの記述があります。 -->
</table>

<div class="news-wrap">
<p>テキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキスト</p>
</div>

.news-wrap の前にあるpタグ群を .news-wrapへ入れたいという意味になります。

しかし、prevだとpタグ一つしか、、 prevAllだと 記事内のすべてのpタグが入ってしまうので希望通りの結果になりません。

prevAllで「pタグ以外のタグが見つかったらストップ」という条件は可能なのでしょうか？
prevAllを使用しないやり方も考えられますでしょうか？

Answer 1

こんな時こそ :has() の出番ですが、「0回以上の繰り返し」がないのでスマートにかけないのが難点ですね。
(XPath を使えばエレガントに書けそうですが…)

<h3>タイトル</h3>
<p>text1-1</p>
<p>text1-2</p>
<p>text1-3</p>
<p>text1-4</p>
<div class="news-wrap"></div>

<table>
  <tbody>
    <tr>
      <td>A1</td>
      <td>A2</td>
      <td>A3</td>
    </tr>
  </tbody>
</table>

<p>text2-1</p>
<p>text2-2</p>
<div class="news-wrap"></div>
<script>
'use strict';
jQuery('.news-wrap').each(function (i, news) {
  news = jQuery(news);
  news.append(news.prevAll('p:has(+.news-wrap),p:has(+p+.news-wrap),p:has(+p+p+.news-wrap),p:has(+p+p+p+.news-wrap)').reverse());
//  news.append(news.prevAll('p:has(+:scope),p:has(+p+:scope),p:has(+p+p+:scope),p:has(+p+p+p+:scope)').reverse()); // Selectors Level 4 的には scope: を使うべきだが、jQuery は未対応
});
</script>

上記コードでは p:has(+.news-wrap) のようにセレクタを書いていますが、この書き方は前方にある別の .news-wrap にもマッチします。
前方から処理する関係で不正な一致はしませんが、本質的には p:has(+:scope) であるべきです。

---

素直に書けば、次のようなコードでしょうか。

'use strict';
jQuery('.news-wrap').each(function (i, news) {
  var p = [],
      element = news = jQuery(news);

  while ((element = element.prev('p')) && element.length > 0) {
    p.push(element);
  }

  news.append(p.reverse());
});

Re: palus さん

Comments

[退会済みユーザー]

凄いです。
こんなスマートにかけるんですね！
whileの使い方がとても勉強になりました。

ありがとうございます！

Answer 2

普通に次のようなコードでよいのではないでしょうか（うちではうまくいきました）。

$(function() {
  $('.news-wrap').each(function() {
    $($(this).prevAll('p').get().reverse()).prependTo($(this));
  })
});

$( ... .get().reverse()) としているのは、.prevAll() で持ってきた p タグの順番が逆順になっていたので、一度 get() でラップ集合から普通の配列に変換し、それを reverse() で逆順にしたうえで $() でまたラップ集合に戻す、というのをやっています。
$('.news-wrap') にたいして each() で次々にアクセスして前に出てくる p タグを自分の配下に入れていくわけですが、次の .news-wrap において prevAll で p タグを集めようとしたとき、その前の .news-wrap の前にあった p タグについてはもうすでに .news-wrap の配下に収まっているので、.news-wrap以降のp` タグしか集まらないことになります。

Answer 3

特に理由がないなら無理してjQueryですべて記述するよりもhtmlの記述を変えてしまったほうが手っ取り早いと思います。

<div>タグで囲んでしまえばそれで済みますね。

Answer 4

$('.news-wrap:first').prevAll('p:parent:not(".news-wrap")')

これなら「news-wrap」要素の前にあって親要素が「news-wrap」でない「p」要素を引っ張ってこれるので、

$('.news-wrap').each(function(x, e){$(e).prevAll('p:parent:not(".news-wrap")').prependTo($(e));})

のようにしてやればうまくいくんじゃないかと。