Question

我需要以编程方式提取网页中的标题，在这些标题正上方注入锚链接，然后在页面顶部附近注入导航链接，链接到同一页面内的锚点。

我需要jQuery选择所有标题为＆＃39; iphorm-group-title'并提取文本。
在每个标题上方，不包括第一个标题，需要注入锚标记，以便访问者可以链接到该页面的该部分。
每个标题的文本（不包括第一个标题）需要在第一个标题之前注入，并链接到上一步中注入的所有锚标记。

此表单由插件生成，或者我只是编辑HTML。

供参考，该页面位于： http://mountpleasantmagazine.com/BestOfBallot/

以下是HTML的一个示例。

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

这里有一些JS会抓住元素并循环遍历文本，这就是我被卡住的地方。

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

以下是注入代码后HTML的预期效果。

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

我刚刚为您制作了一段代码片段，希望如此，这就是您所需要的。

＆＃13;

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

＆＃13;

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

＆＃13;

jQuery迭代类元素，抓取文本，插入其他地方

1 个答案: