jQueryのwrapメソッドで複数の要素をまとめたい

Question

前提・実現したいこと

閲覧誠にありがとうございます。jQuery初心者になります。
会社が運営するECサイトの修正を任されました。
スマホの商品一覧が現在一列になっているのですがそれを二列にしたいと、修正しているのですがHTMLが下記のようになっており、また独自のシステムを使用しているのでHTML自体の修正が出来ません。

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

<ul>
<li class="gazou"></li>
<div class="cart"></div>
<li class="gazou"></li>
<div class="cart"></div>
<li class="gazou"></li>
<div class="cart"></div>
</ul>

実現したいことは、できれば<li>の中に<div>を入れてfloatなどで横並びにしたいのですが、私の知識ではどうやったらいいかわからずせめて<li></li><div></div>を囲む<div>を生成したいと思います。

理想はこのような感じです。

<ul>
<div class="wrap">
	<li class="gazou"></li>
	<div class="cart"></div>
</div>
<div class="wrap">
	<li class="gazou"></li>
	<div class="cart"></div>
</div>
<div class="wrap">
	<li class="gazou"></li>
	<div class="cart"></div>
</div>
</ul>

試したこと

jQueryのwrapメソッドを使用して囲もうと思い下記コードを試してみましたが、こちらを使うと<li><div>をバラバラに囲んでしまいます。

jQuery

<script>
$( '.gazou, .cart' ).wrap( '<div class="wrap"></div>' );
</script>

HTML

<ul>
<div class="wrap">
	<li class="gazou"></li>
</div>
<div class="wrap">
	<div class="cart"></div>
</div>
<div class="wrap">
	<li class="gazou"></li>
</div>
<div class="wrap">
	<div class="cart"></div>
</div>
</ul>

初心者過ぎる質問で大変恐縮なのですが、お分かりになられる方がおりましたらアドバイス頂けますと幸いです。
どうぞよろしくお願いいたします。

Answer 1

ulの直下にdivを置くことはできませんので問題として成り立っていません

Comments

[5w4wcnt]

ご回答誠にありがとうございます。そもそもの問題でしたね…勉強不足で申し訳ございません。
因みになのですが、

<ul>
<li class="gazou">
<div class="cart"></div>
</li>
</ul>

のようにどうにか<li>で囲むjavascriptやjQueryはないでしょうか

[yambejp]

あえてやるならこんな感じですか？
$(function(){
$('div.cart').each(function(){
$(this).appendTo($(this).prev('.gazou'));
});
});

ulの下にはliかscriptかtemplateしか置けません
例示のようなdivが直接置かれている場合ただしい動作になるかは
運次第です

[5w4wcnt]

大変勉強になります。ありがとうございます。
頂いたコードお借りさせていただきます。

会社のコード自体がすでに<ul>内に＜div＞が入っておりまして、表示は崩れていないのですがそれは運だったのですね…。教えていただけて大変勉強になりました。
ありがとうございます。

[yambejp]

参考：
https://developer.mozilla.org/ja/docs/Web/HTML/Element/ul

[5w4wcnt]

何から何まで本当にすみません…！ありがとうございます！