我的程序生成以下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>
最佳答案
那这个呢?
var $zendTagCloudLinks = $(".Zend_Tag_Cloud").find("a")
.addClass("in-the-news-bar__link")
.removeAttr("style");
$zendTagCloudLinks.insertAfter(".Zend_Tag_Cloud");
$(".Zend_Tag_Cloud").remove();
关于javascript - 通过JavaScript调整html标签和CSS样式,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42704834/