div class="a1"へ要素をまとめる方法について

Question

###前提・実現したいこと
以下のようなhtmlのdataをpythonを使って処理しようとしています。モジュールはlxmlをiportして扱おうとしています

<div class='a'><img src='aa.jpg'></div>
<div class='b'><img src='ab.jpg'></div>
<div class='b'><img src='ac.jpg'></div>
<div class='b'><img src='ad.jpg'></div>
<div class='a'><img src='ba.jpg'></div>
<div class='b'><img src='bb.jpg'></div>
<div class='b'><img src='bc.jpg'></div>

これを

<div class='a'><img src='aa.jpg'>
<img src='ab.jpg'>
<img src='ac.jpg'>
<img src='ad.jpg'></div>
<div class='a'><img src='ba.jpg'>
<img src='bb.jpg'>
<img src='bc.jpg'></div>

のように変換したいと思っています

###やったこと
find('.//div[@class="b"]') でサーチして子要素をclass='a'の配下にappendしようととしたのですが直前のclass='a'の位置をどうすれば取得できるのかがわからず、断念してしまいました。

このような場合はそもそも上のやり方であっているのか、それとも他にスマートなやり方があるのか、lxmlの操作に不慣れなため判断ができません

なにか良い方法があればよろしくお願いします

Answer 1

dockerdev@py3:~$ cat a
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
import lxml.html

html = """
<div class='a'><img src='aa.jpg'></div>
<div class='b'><img src='ab.jpg'></div>
<div class='b'><img src='ac.jpg'></div>
<div class='b'><img src='ad.jpg'></div>
<div class='a'><img src='ba.jpg'></div>
<div class='b'><img src='bb.jpg'></div>
<div class='b'><img src='bc.jpg'></div>
<div class='a'><img src='ca.jpg'></div>
<div class='b'><img src='cb.jpg'></div>
"""
doc = lxml.html.fromstring(html)
# next がclass="b"の間はclass="a"にappend
for e in doc.findall('.//div[@class="a"]'):
    n = e.getnext()
    while True:
        if n != None and n.get('class') == 'b':
            for img in n:
                if img.tag == 'img':
                    e.append(img)
        else:
            break
        n = n.getnext()
# 不要なdivを一気に消す
for e in doc.findall('.//div[@class="b"]'):
    parent = e.getparent()
    parent.remove(e)

print(lxml.etree.tostring(doc, pretty_print=True).decode('utf8'))
dockerdev@py3:~$ python3 a
python3 a
<div><div class="a"><img src="aa.jpg"/><img src="ab.jpg"/><img src="ac.jpg"/><img src="ad.jpg"/></div>
<div class="a"><img src="ba.jpg"/><img src="bb.jpg"/><img src="bc.jpg"/></div>
<div class="a"><img src="ca.jpg"/><img src="cb.jpg"/></div>
</div>

dockerdev@py3:~$ 

Comments

[argius]

これだと次のclass="a"が前のclass="a"の中に入ってしまわないですか？

[hiono]

確認ありがとうございます。一応自分の期待通りにはなっていましたので実行結果を追加しました

[argius]

あれ、私の手元でも再確認してみましたが、ちゃんとできてますね。
大変失礼しました。

Answer 2

前後関係だと、lxmlにかかわらずイテレーションで処理するしか無いような。たぶん。

divを1個ずつ見ていって、
親（class=a）が出てきたら、
→最初の親なら、それを「最初の要素(top)」「今の親(parent)」にセット。
→そうでないなら、「今の親」に自分を追加し、自分が「今の親」になる。
子（class=b）が出てきたら、下の要素だけを「今の親」に追加。

• 例

import lxml.html

html = """
<div class='a'><img src='aa.jpg'></div>
<div class='b'><img src='ab.jpg'></div>
<div class='b'><img src='ac.jpg'></div>
<div class='b'><img src='ad.jpg'></div>
<div class='a'><img src='ba.jpg'></div>
<div class='b'><img src='bb.jpg'></div>
<div class='b'><img src='bc.jpg'></div>
<div class='a'><img src='ca.jpg'></div>
<div class='b'><img src='cb.jpg'></div>
"""

top = None
parent = None

dom = lxml.html.fromstring(html)
for div in dom.iterfind(".//div"):
    if div.get("class") == "a":
        if parent is None:
            top = div
            parent = div
        else:
            parent.append(div)
            parent = div
    else:
        parent.append(div[0])

top # 処理結果

Comments

[hiono]

やはりそうですか。
もうちょっと綺麗な形になるのかなと思ったのですが、
自分もとりあえず「あなたの回答」のようにbの間回す、そしてまとめてbを消すという感じでやってみました

ありがとうございました