[英]Adjusting html tags and css styles via JavaScript
My program generates the following html code. 我的程序生成以下html代码。 And I need to adjust it via client side scripting (jquery) in order to look exactly the code I have found extreme below.
而且我需要通过客户端脚本(jquery)对其进行调整,以便准确查看下面我发现的极端代码。 Please note I can't modify the code server-side.
请注意,我无法在服务器端修改代码。 I need to remove ul and li tags while retaining the href links and tag names and add a css class.
我需要删除ul和li标签,同时保留href链接和标签名称,并添加一个CSS类。 I also need to remove the given font size: 10px.
我还需要删除给定的字体大小:10px。 I am not very expert in js so I need your help figuring out how to do that.
我不是js方面的专家,因此我需要您的帮助来弄清楚该怎么做。 I have tried some scripts including the following but it entirely removes all the li tags and their contents.
我尝试了一些脚本,包括以下脚本,但它完全删除了所有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>
The original code generated by my program: 我的程序生成的原始代码:
<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>
The final html code should look like the following: 最终的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>
What about this? 那这个呢?
var $zendTagCloudLinks = $(".Zend_Tag_Cloud").find("a")
.addClass("in-the-news-bar__link")
.removeAttr("style");
$zendTagCloudLinks.insertAfter(".Zend_Tag_Cloud");
$(".Zend_Tag_Cloud").remove();
This code converts each li to a div with the class stuff. 这段代码将每个li转换为带有类东西的div。 It uses jQuery.
它使用jQuery。 Additionally, it removes the ul entirely (I believe, per your request).
此外,它会完全删除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>
You can iterate over the list links - add the class and remove the style attribute and then prepend it to the parent div that contains the list (I called that #parentDiv) - note that removing the lis t structure will cause all the a's to display in a sequence on one line rather than on separate lines - so I also added a CSS rule to cause them to display:block. 您可以遍历列表链接-添加类并删除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>
You could use something like the following. 您可以使用类似以下的内容。 This solution is a bit more verbose, but doesn't require jQuery.
此解决方案较为冗长,但不需要jQuery。 Essentially, you put your list in a parent element (.Zend_Tag_Cloud--container) and the javascript finds the links and inserts them back into the container (removing original style and adding a class) overwriting the original ul.
本质上,您将列表放在父元素(.Zend_Tag_Cloud--container)中,然后javascript会找到链接并将其插入容器中(删除原始样式并添加类),从而覆盖原始ul。 Depending on the context you are using this in, you will want to considering how to best namespace your class / ID names.
根据您在其中使用的上下文,您将要考虑如何最好地命名类/ 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>
So we get a reference to the ul
that we'll eventually replace with a document fragment. 因此,我们获得了对
ul
的引用,最终将用文档片段替换它。 This document fragment contains the a
we find within the ul
. 该文件片段包含了
a
我们在中找到ul
。 We will replace the ul
with the fragment using jQuery's replaceWith() . 我们将使用jQuery的replaceWith()将
ul
替换为片段。
The document fragment acts as a container to hold the a
we find until we're ready to insert the new markup. 该文档片段作为一个容器,以便容纳
a
,我们发现,直到我们已经准备好插入新的标记。 Document fragments are fast and appending our items to one allow us to perform a single DOM insertion for all of the found a
. 文档片段很快,并且将我们的项目附加到一个对象上,使我们可以对所有找到
a
执行一个DOM插入。
end() allows us to "rewind" to the previous collection as once we performed find()
we were working with a collection of a
and not the original collection contained in $ul
. 结束()允许,因为一旦我们完成我们“倒带”到以前的集合
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>
You can use $.each()
to loop through the a
tags, add the class, remove the style
attribute, and append it to the document before the .Zend_Tag_Cloud
list, then remove the list using $.remove()
您可以使用
$.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.