通过JavaScript调整html标签和CSS样式

Question

我的程序生成以下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> 

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

<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>

Answer 1

那这个呢？

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

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

Answer 2

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

<div class="restyle">

<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>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
newHtml = "";
$("div.restyle ul.Zend_Tag_Cloud li").each(function() {
    $(this).find("a").attr("style","").addClass("in-the-news-bar__link");
    newHtml += "<div class='stuff'>" + $(this).html() + "</div>";
});
$(".restyle").html(newHtml);
</script>

Answer 3

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

 $(document).ready(function(){ $('.Zend_Tag_Cloud li a').each(function(){ $(this).addClass('in-the-news-bar__link').removeAttr('style'); $('#parentDiv').prepend($(this).parent().html()); }) $('.Zend_Tag_Cloud').remove(); }) 

 a{display:block} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="parentDiv"> <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> </div> 

Answer 4

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

 var links = []; var container = document.querySelector('.Zend_Tag_Cloud--container'); var lis = document.querySelectorAll('.Zend_Tag_Cloud a'); for (var i=0; li=lis[i]; i++) { links.push(li); } container.innerHTML = ''; links.forEach(function(link) { link.style = null; link.className += " in-the-news-bar__link"; container.appendChild(link); }); 

 <div class="Zend_Tag_Cloud--container"> <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> </div> 

Answer 5

因此，我们获得了对ul的引用，最终将用文档片段替换它。 该文件片段包含了a我们在中找到ul 。 我们将使用jQuery的replaceWith（）将ul替换为片段。

该文档片段作为一个容器，以便容纳a ，我们发现，直到我们已经准备好插入新的标记。 文档片段很快，并且将我们的项目附加到一个对象上，使我们可以对所有找到a执行一个DOM插入。

结束（）允许，因为一旦我们完成我们“倒带”到以前的集合find() ，我们用的集合是工作a包含在，而不是原来的集合$ul 。

 $( function () { var $ul = $( 'ul' ), frag = document.createDocumentFragment(); $ul.find( 'a' ) .each( function ( i, item ) { frag.appendChild( $( item ).addClass( 'in-the-news-bar__link' ).attr( 'style', null )[ 0 ] ); } ) .end() .replaceWith( frag ); } ); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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> 

Answer 6

您可以使用$.each()遍历a标签，添加类，删除style属性，并将其附加到.Zend_Tag_Cloud列表之前的.Zend_Tag_Cloud中，然后使用$.remove()删除列表。

 $('a').each(function() { $(this).addClass('in-the-news-bar__link').removeAttr('style').insertBefore('.Zend_Tag_Cloud'); }); $('.Zend_Tag_Cloud').remove(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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>