Brian Brian - 2 months ago 7
Javascript Question

jQuery to iterate through class elements, grab text, insert elsewhere

I need to programmatically extract titles within a webpage, inject anchor links right above those titles and then inject navigation links near the top of the page that will link to those anchors within the same page.


  • I need jQuery to select all headings with the class of 'iphorm-group-title’ and extract the text.

  • Above each heading, excluding the first heading, an anchor tag needs to be injected so that a visitor can link to that section of the page.

  • The text of each heading, excluding the first heading, needs to be injected before the first heading and linked to all the anchor tags that were injected in the previous step.



This form is generated by a plugin or I would just edit the HTML.

For reference, the page is located at:
http://mountpleasantmagazine.com/BestOfBallot/

Here is an example of the HTML as of now.

<div>
<div>
<div class="iphorm-group-title">VOTER INFO</div>
</div>
<div>
<div class="iphorm-group-title">SHOPPING & GOODS</div>
</div>
<div>
<div class="iphorm-group-title">FOOD & DRINK</div>
</div>
<div>
<div class="iphorm-group-title">ENTERTAINMENT & LEISURE</div>
</div>
</div>


Here is some JS that will grab the elements and loop through the text, which is the point where I'm stuck.

jQuery('.iphorm-group-title').each(function () {
console.log(jQuery(this).text());
});


Here is how the HTML is expected to look after injecting the code.

<div>
<div>
<a href="#shoppinggoods">SHOPPING & GOODS</a> | <a href="#fooddrink">FOOD & DRINK</a> | <a href="#entertainmentleisure">ENTERTAINMENT & LEISURE</ a>
</div>
<div>
<div class="iphorm-group-title">VOTER INFO</div>
</div>
<div>
<a name="shoppinggoods"></a>
<div class="iphorm-group-title">SHOPPING & GOODS</div>
</div>
<div>
<a name="fooddrink"></a>
<div class="iphorm-group-title">FOOD & DRINK</div>
</div>
<div>
<a name="entertainmentleisure"></a>
<div class="iphorm-group-title">ENTERTAINMENT & LEISURE</div>
</div>
</div>

Answer

I just made a code snippet for you hope so it's the exact what you needed.

var listElement=jQuery("<div id='menuList'></div>").insertBefore(".iphorm-elements");
jQuery(".iphorm-elements .iphorm-group-wrap:not(:first-child)")
.each(function() {
  if (jQuery(this)
    .not(".iphorm-group-wrap:first")) {
    var heading = jQuery(this)
        .find(".iphorm-group-title");
    var headingName = heading.text()
        .split(' ')
        .join('')
        .replace('&', '');
    var lowerHeading = headingName.toLowerCase();
    var anchorUrl = [lowerHeading.slice(0, 0), lowerHeading.slice(0)].join('');
    var anchorText = heading.text();
    var anchorLink=jQuery('<a name="' + anchorUrl + '"></a>')
        .insertBefore(heading);
    var anchorLink2=jQuery('<a href="#' + anchorUrl + '">' + anchorText + '</a>' +"<span>&nbsp;|&nbsp;</span>")
    .insertBefore(heading);
    jQuery(listElement).append(anchorLink2);
  }
});
jQuery("#menuList span:last-child").remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="iphorm-elements">
    <div class="iphorm-group-wrap">
         <div class="iphorm-group-title-description-wrap">
            <div class="iphorm-group-title">VOTER INFO</div>
         </div>
   </div>
   <div class="iphorm-group-wrap">
         <div class="iphorm-group-title-description-wrap">
            <div class="iphorm-group-title">SHOPPING & GOODS</div>
         </div>
   </div>
   <div class="iphorm-group-wrap">
         <div class="iphorm-group-title-description-wrap">
            <div class="iphorm-group-title">FOOD & DRINK</div>
         </div>
   </div>
   <div class="iphorm-group-wrap">
         <div class="iphorm-group-title-description-wrap">
            <div class="iphorm-group-title">FOOD & DRINK</div>
         </div>
   </div>
   <div class="iphorm-group-wrap">
         <div class="iphorm-group-title-description-wrap">
            <div class="iphorm-group-title">ENTERTAINMENT & LEISURE</div>
         </div>
   </div>
</div>