Question

我有这样的结构：

<div class="row tabs specialtabfontsize"> 
    <nav class="tabsnav">
      <a class="stdhead" href=""> tab1 </a>
      <a class="stdhead" href=""> tab2 </a>
      <a class="stdhead" href=""> tab3 </a>
    </nav>

    <article class="columns">content1...</article>
    <article class="columns">content2...</article>
    <article class="columns">content3...</article> 
</div>

我想用jQuery将其改为：

<div class="row tabs specialtabfontsize">    
    <nav class="tabsnav"><a class="stdhead" href=""> tab1 </a></nav>
    <article class="columns">content1...</article>

    <nav class="tabsnav"><a class="stdhead" href=""> tab2 </a></nav>
    <article class="columns">content2...</article>

    <nav class="tabsnav"><a class="stdhead" href=""> tab3 </a></nav>
    <article class="columns">content3...</article>

</div>

这适用于移动视图。在桌面版中，它看起来像标签。但我想在手机版中像手风琴一样展示它们。我不能改变标记;所以我只能使用脚本。

Answer 1

working solution。

var myNavs = new Array();
var myContents = new Array();
var i=0;

$(".stdhead").each( function () {
    myNavs[i++]=$(this).clone().wrap('<p>').parent().html();
});

i=0;

$(".columns").each( function () {
    myContents[i++]=$(this).clone().wrap('<p>').parent().html();    
});

$(".specialtabfontsize").empty();
for(j=0;j<i;j++) {
    $(".specialtabfontsize").append('<nav class="tabsnav">' + myNavs[j] + '</nav>' + myContents[j]);
}

Answer 2

正如已经指出的那样，这不是最好的方法，但如果你必须这样做，你可以这样做：

var newHTML = "",
    $row = $('.row'),
    $links = $row.find("a"),
    $articles = $row.find("article");

$links.each(function(i, el){
  newHTML += "<nav class='tabsnav'>" + el.get(0) + "</nav>" + $articles[i].get(0);
});

$(".row").html(newHTML);

如果必须根据窗口大小进行还原，例如，它将非常简单。

使用jQuery更改HTML标记结构

2 个答案: