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

此代碼每個L1轉換成一個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

您可以遍歷鏈接列表 - 添加類和刪除樣式屬性，然後在前面加上包含該列表中的父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 - 容器）中，並且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參考，我們最終會用文檔片段代替。此文件片段包含我們在ul內找到的a。我們將用jQuery的replaceWith()替換ul的片段。

文檔片段充當容器來容納我們發現的a，直到我們準備好插入新的標記爲止。文檔片段很快，並附加到我們的項目，讓我們執行所有發現的a單個DOM插入。

end()允許我們「倒帶」到以前的集合，因爲一旦我們進行find()我們與包含在$ul的a的集合，而不是原始集合進行工作。

$(function() { 
 

 
    var $ul = $('ul'), 
 
     frag = document.createDocumentFragment(); 
 
    
 
    $ul.find('a') 
 
    .each(function (i, item) { 
 
    \t 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列表之前的文件，然後刪除使用$.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>