通过JavaScript调整html标记和css样式

我的程序生成以下html代码。我需要通过客户端脚本（jquery）对其进行调整，以便准确地查看我在下面找到的代码。请注意，我无法修改服务器端的代码。我需要删除ul和li标记，同时保留href链接和标记名，并添加css类。我还需要删除给定的字体大小：10px。我不是js方面的专家，所以我需要你的帮助，找出如何做到这一点。我尝试了一些脚本，包括以下脚本，但它完全删除了所有li标记及其内容

<script type="text/javascript">
var lis = document.querySelectorAll('.Zend_Tag_Cloud li');
    for(var i=0; li=lis[i]; i++) {
        li.parentNode.removeChild(li);
}
</script> 

var lis=document.queryselectoral（'.Zend_Tag_Cloud li'）；
for（var i=0；li=lis[i]；i++）{
li.parentNode.removeChild（li）；
}

我的程序生成的原始代码：

<ul class="Zend_Tag_Cloud">
        <li>
            <a href="/content/article/tag/136/" style="font-size: 10px;">workout  definition</a>
        </li>
        <li>
            <a href="/content/article/tag/140/" style="font-size: 20px;">workout  plans for men</a>
        </li>
        <li>
            <a href="/content/article/tag/139/" style="font-size: 20px;">workout  program</a>
        </li>
        <li>
            <a href="/content/article/tag/141/" style="font-size: 20px;">workout  routines for beginners</a>
        </li>
        <li>
            <a href="/content/article/tag/138/" style="font-size: 20px;">workout  schedule</a>
        </li>
        <li>
            <a href="/content/article/tag/137/" style="font-size: 20px;">workouts at home</a>
        </li>
    </ul>

最终的html代码应如下所示：

<a class="in-the-news-bar__link" href="/content/article/tag/136/">workout  definition</a>
<a class="in-the-news-bar__link" href="/content/article/tag/140/">workout  plans for men</a>
<a class="in-the-news-bar__link" href="/content/article/tag/139/">workout  program</a>
<a class="in-the-news-bar__link" href="/content/article/tag/141/">workout  routines for beginners</a>
<a class="in-the-news-bar__link" href="/content/article/tag/138/">workout  schedule</a>
<a class="in-the-news-bar__link" href="/content/article/tag/137/">workouts at home</a>

---

此代码将每个li转换为一个带有类stuff的div。它使用jQuery。此外，它完全删除了ul（我相信，根据您的要求）

newHtml=“”；
$（“div.restyle ul.Zend_Tag_Cloud li”）。每个（函数（）{
$（this.find（“a”）.attr（“style”，“style”）.addClass（“in-the-news-bar__链接”）；
newHtml++=“”+$（this.html（）+“”）；
});
$（“.restyle”）.html（newHtml）；

此代码将每个li转换为一个带有类stuff的div。它使用jQuery。此外，它完全删除了ul（我相信，根据您的要求）

newHtml=“”；
$（“div.restyle ul.Zend_Tag_Cloud li”）。每个（函数（）{
$（this.find（“a”）.attr（“style”，“style”）.addClass（“in-the-news-bar__链接”）；
newHtml++=“”+$（this.html（）+“”）；
});
$（“.restyle”）.html（newHtml）；

您可以迭代列表链接-添加类并删除style属性，然后将其前置到包含列表的父div（我称之为#parentDiv）-请注意，删除LIST结构将导致所有a按顺序显示在一行上，而不是在单独的行上-因此我还添加了一个CSS规则以使它们显示：block

$（文档）.ready（函数（）{
$（'.Zend_Tag_Cloud li a'）。每个（函数（）{
$（this）.addClass（'in-the-news-bar__链接'）.removeAttr（'style'）；
$（'#parentDiv'）.prepend（$（this.parent（）.html（））；
})
$（'.Zend_Tag_Cloud'）.remove（）；
})

a{display:block}

您可以迭代列表链接-添加类并删除style属性，然后将其前置到包含列表的父div（我称之为#parentDiv）-请注意，删除LIST结构将导致所有a按顺序显示在一行上，而不是在单独的行上-因此我还添加了一个CSS规则以使它们显示：block

$（文档）.ready（函数（）{
$（'.Zend_Tag_Cloud li a'）。每个（函数（）{
$（this）.addClass（'in-the-news-bar__链接'）.removeAttr（'style'）；
$（'#parentDiv'）.prepend（$（this.parent（）.html（））；
})
$（'.Zend_Tag_Cloud'）.remove（）；
})

a{display:block}

这个怎么样

    var $zendTagCloudLinks = $(".Zend_Tag_Cloud").find("a")
        .addClass("in-the-news-bar__link")
        .removeAttr("style");

    $zendTagCloudLinks.insertAfter(".Zend_Tag_Cloud");
    $(".Zend_Tag_Cloud").remove();

这个怎么样

    var $zendTagCloudLinks = $(".Zend_Tag_Cloud").find("a")
        .addClass("in-the-news-bar__link")
        .removeAttr("style");

    $zendTagCloudLinks.insertAfter(".Zend_Tag_Cloud");
    $(".Zend_Tag_Cloud").remove();

---

您可以使用如下内容。这个解决方案有点冗长，但不需要jQuery。本质上，您将列表放在父元素（.Zend_Tag_Cloud--container）中，javascript会找到链接并将其插入容器中（删除原始样式并添加类），覆盖原始ul。根据您在其中使用的上下文，您将需要考虑如何最好地命名您的类/ID名称

var-links=[]；
var container=document.querySelector（'.Zend_Tag_Cloud--container'）；
var lis=document.queryselectoral（'.Zend_Tag_Cloud a'）；
for（var i=0；li=lis[i]；i++）{
链接。推送（li）；
}
container.innerHTML=''；
links.forEach（函数（link）{
link.style=null；
link.className+=“in-the-news-bar__链接”；
container.appendChild（link）；
});















您可以使用以下内容。这个解决方案有点冗长，但不需要jQuery。本质上，您将列表放在父元素（.Zend_Tag_Cloud--container）中，javascript会找到链接并将其插入容器中（删除原始样式并添加类），覆盖原始ul。根据您在其中使用的上下文，您将需要考虑如何最好地命名您的类/ID名称


var-links=[]；
var container=document.querySelector（'.Zend_Tag_Cloud--container'）；
var lis=document.queryselectoral（'.Zend_Tag_Cloud a'）；
对于（var i=0；li=lis[i]；i++