2

親、祖父母、偉大な祖父母を持つネストされた div 内にアイテムのリストがありますdiv。HTML コードは次のようになります。

<div class="marketing">
  <div class="module-surround">
    <div class="module-content">
      <div class="k2ItemsBlock">
        <ul>
          <li><div>4</div></li>
          <li><div>5</div></li>
          <li><div>6</div></li>
          <li><div>7</div></li>
        </ul>
      </div>
    </div>
  </div>
</div>

リストされたすべてのアイテムを親 div に変換し、リストされたすべてのアイテムを使用して偉大な親の div を置き換え、全体的なコードが次のようになるようにします。

<div><div>4</div></div>
<div><div>5</div></div>
<div><div>6</div></div>
<div><div>7</div></div>

私のロジックでは、これを達成するために jQuery を使用したいと考えています。これまでのところ、すべての要素を .K2ItemsBloc ul 内のリストされた項目に取得し、div.marketing をリストに置き換えて、jQuery コードをそれはこのように見えますか

//1. Get all content in K2ItemsBlock ul into a variable called mlist
    var mlist = $(".k2ItemsBlock ul").contents()
//2. Change all li HTML elements inside the variable mlist to div

//3. Replace div.marketing with the variable mlist
    $(".marketing").replaceWith(mlist);

タスク 2 を使用しない上記の jQuery コードの行は、元のコードを次のように変換します。

<li><div>4</div></li>
<li><div>5</div></li>
<li><div>6</div></li>
<li><div>7</div></li>

私が今理解できるのは、div.marketing を置き換える前に、変数 mlist 内のすべての li 要素を変換する構文です。

提案やアイデアはありますか？

4

4 に答える 4

4

divが要素の有効な子であるかどうかはわかりませんul..しかし、あなたはこのようにすることができます

$('.k2ItemsBlock li>div').unwrap() // <--- removes the li
                      .wrap('<div/>'); // <-- adds the div

フィドル

編集：li>divより具体的にするためだけに追加するように編集しました

トップレベルのli/divのみに影響を与えたい場合..セレクターをこれに変更します

$('.k2ItemsBlock > ul > li > div') // <--  ">" is direct child selector
于 2013-01-17T20:38:35.000 に答える
0 
// Get an array of li elements
var mlist = $(".k2ItemsBlock ul li");
// new array of div's containing the content of li elements
var dlist = mlist.map(function(i, val){return "<div>" + $(val).html() + "</div>";});
// join div array into a single string
var result = dlist.toArray().join('');
于 2013-01-17T20:58:45.560 に答える
0

完全な解決策は次のとおりです。

var marketing = $(".marketing");
var content = marketing.children().remove();
content.find(".k2ItemsBlock li>div").unwrap().wrap("<div>");
marketing.replaceWith(content.find(".k2ItemsBlock li>div");

これにより、最上位の div 以外のすべてが取得されます。DOM から削除し、効率のために Javascript 内で操作を実行します。そして、最上位の div を結果の html に置き換えます。

于 2013-01-17T20:34:48.833 に答える
0 

mlist = mlist.replace('/li/g','div');

するべきです。置き換えた方が良いかもしれないので、実際の文字 li があれば誤って置き換えないようにします<li>。</li>

mlist = mlist.replace('/<li>/g','<div>').replace('/<\/li>/g','</div>');

あなたはアイデアを得る。

于 2013-01-17T20:36:40.573 に答える