2

我有一个嵌套 div 内的项目列表，其中包含 parent、grand parent 和曾祖父母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/divs.. 将您的选择器更改为此

$('.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 中执行操作以提高效率。然后用生成的 html 替换顶级 div。

于 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 回答