[英]Adjusting html tags and css styles via JavaScript
我的程序生成以下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();
這段代碼將每個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>
您可以遍歷列表鏈接-添加類並刪除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>
您可以使用類似以下的內容。 此解決方案較為冗長,但不需要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>
因此,我們獲得了對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>
您可以使用$.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.