只要它们具有相同的类别，如何组合标签 [英] How to combine tags as long as they have the same class

问题描述

理想状态的Html看起来像这样：

 < span class =RapidLink1-H>查看更详细的内容，其中< / span> 
  

接下来我的目标是将span标记更改为一个定位标记。有了理想的Html，我已经这样做了：

  //遍历此页面上的每个链接标记并替换内容与实际的链接
 thisLink.each（function（）{
 
 linkRefTarget =''; 
 
 //获取链接的标识号
 linkId =（$（this）.attr（'class'））。replace（/ [A-Za-z $  - ] / g，''）; 
 
 //将此链接与链接引用列表
 if（thisLinkRef）{
 for（var this thisLinkRef）{
 if（key =='link'+ linkId）linkRefTarget = thisLinkRef [key]; 
 
} 
 
 output =''; 
 output + ='< a href =＃'+ linkRefTarget +'id =link'+ linkId +' class =rapidLink>'; 
 output + = $（this）.html（）; 
 output + =' < / a>'; 
 
}）。replaceWith（output）; 
  

现在，问题出现在我实际得到这种Html的时候（请注意，我可以不改变Html输入）：

 < span class =RapidLink1-H>请参阅< / span> < span class =RapidLink1-H>有关< / span>< span class =RapidLink1-H的更详细的区域>什么不是< / span>< / span> 
  

问题是：

我怎么能得到它与这样一个破损的跨度组合？

我在考虑以下内容：

• 查找预期的链接范围
  
• 检查下一个元素是否也是具有相同类的范围


• ，然后检查紧接着的下一个元素是否也是...，


• ，然后检查...


• 发现，将每个跨度的innerHtml合并为一个锚标记

我怎么能达到这样的循环？

谢谢。

解决方案

+ 选择连续元素的选择器： http://jsfiddle.net/NWWYC/1/ 。

  $（。RapidLink1-H + .RapidLink1-H）。each（function（）{
 / /将内容移至上一个范围，然后删除此范围
 $（this）.prev（。RapidLink1-H）。append（
 $（this）.contents（）
）.end（）。remove（）; 
}）; 
  

The Html that I'm getting ideally looks like this:

<span class="RapidLink1-H">See the more detailed areas of what not</span>

Next my aim is to change the span tag into an anchor tag. With the ideal Html, I have done it this way:

            // Walk through each link tag on this page and replace the content with an actual link
            thisLink.each(function() {

                linkRefTarget = '';

                // Get only the identifier number of the link
                linkId = ($(this).attr('class')).replace(/[A-Za-z$-]/g, '');

                // Match this link with the list of link references
                if (thisLinkRef) {
                    for (var key in thisLinkRef) {
                        if (key == 'link' + linkId) linkRefTarget = thisLinkRef[key];
                    }
                }

                output = '';
                output+= '<a href="#' + linkRefTarget + '" id="link' + linkId + '" class="rapidLink">';
                output+= $(this).html();
                output+= '</a>';

            }).replaceWith(output);

Now, the problem comes when I'm actually getting this sort of Html (please note, I can't change the Html input):

<span class="RapidLink1-H">See the</span><span class="RapidLink1-H">more detailed areas of</span><span class="RapidLink1-H">what not</span></span>

The question is:

How could I get it to work with such a broken set of spans?

I'm thinking the following:

• Find an expected link span
• Check whether the immediate next element is also a span with the same class
• and then check whether the immediate next element is also...,
• and then check...
• if none is found, combine the innerHtml of each span into a single anchor tag

How could I achieve such a loop?

Thanks.

解决方案

There is the + selector which selects consecutive elements: http://jsfiddle.net/NWWYC/1/.

$(".RapidLink1-H + .RapidLink1-H").each(function() {
    // move contents to previous span, remove this span afterwards
    $(this).prev(".RapidLink1-H").append(
        $(this).contents()
    ).end().remove();
});

这篇关于只要它们具有相同的类别，如何组合标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！