CODEWITHSUNDEEP
javascriptjquerycss
Anay Bose
Anay Bose

Reputation: 890

Adjusting html tags and css styles via JavaScript

My program generates the following html code. And I need to adjust it via client side scripting (jquery) in order to look exactly the code I have found extreme below. 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. I also need to remove the given font size: 10px. I am not very expert in js so I need your help figuring out how to do that. I have tried some scripts including the following but it entirely removes all the li tags and their contents. 

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

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

Upvotes: 0

Views: 91

Answers (6)

hungerstar
hungerstar

Reputation: 21685

So we get a reference to the ul that we'll eventually replace with a document fragment. This document fragment contains the a we find within the ul. We will replace the ul with the fragment using jQuery's replaceWith().

The document fragment acts as a container to hold the a we find until we're ready to insert the new markup. Document fragments are fast and appending our items to one allow us to perform a single DOM insertion for all of the found a.

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.

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

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53674

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

$('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>

Upvotes: 0

Josh
Josh

Reputation: 403

You could use something like the following. This solution is a bit more verbose, but doesn't require 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. Depending on the context you are using this in, you will want to considering how to best namespace your class / ID names.

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>

Upvotes: 0

Sujen
Sujen

Reputation: 188

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();

Upvotes: 2

gavgrif
gavgrif

Reputation: 15499

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.

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

Upvotes: 0

Neil
Neil

Reputation: 14313

This code converts each li to a div with the class stuff. It uses jQuery. Additionally, it removes the ul entirely (I believe, per your request). 

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

Upvotes: 0

Related Questions