4

アルファベットの文字ごとにページに分割されたアイテムの長いリストの ABC リンクを提供する次の HTML があります。HTMLを変更できません。

<p>
    <a href="A.html">A</a>

    <!-- all the items on this page start with this letter 
         It is not contained in any special div, just floats among the links -->
    B

    <a href="c.html">C</a>        
    <a href="d.html">D</a>        
    <a href="e.html">E</a>        
    <a href="f.html">F</a>        
    <a href="g.html">G</a>

    <!-- and so on through z -->
</p>

すべての文字の間に区切り文字 (次の HTML) を配置する必要があります。

<span class="separator">|</span>

ただし、すべてのリンクの前後にセパレーターを配置すると、プレーンなレターには、それ自体とそれを囲むリンクの 1 つとの間にセパレーターがありません。

<a>HTML を変更せずに、すべてのリンクの間にセパレーターを配置するにはどうすればよい<p>ですか?

望ましい結果を表示するように編集しました (多くの可能性のうちの 2 つ)。太字の文字はリンクではありません。他のすべての文字は次のとおりです。

あ| ビ | シー | D | え | ファ...

あ | ビ | シー| D | え | ファ...

4

2 に答える 2

2 
var separator = "<span class='separator'>|</span>";

$("p").contents().each(function(){
    var $this = $(this);

    if($.trim($this.text()).length>0){
        if(this.nodeType == 3){
            // text node, possibly multiple characters that need separation
            var characters = this.nodeValue.replace(/\s/g, "").split("");
            var output = "";

            for(var i=0; i<characters.length; i++){
                output += " " + characters[i] + separator;
            }                    

            $(this).replaceWith(output + " ");                
        } else {
            $this.after(separator);
        }
    }
});

$(".separator:last").remove();

http://jsfiddle.net/kJ3yW/1/

于 2012-12-18T21:45:35.083 に答える
2

これを試して：

var p = // some method of getting the correct <p> tag
var c = p.childNodes, i, isfirst = true, s;
for(i=0;i<c.length;i++) { // skip the first child node
  if( c[i].tagName || c[i].nodeValue.match(/[a-z]/)) {
    // if node is a tag or a non-empty text node
    if( isfirst) isfirst = false; // skip first node
    else {
      s = p.insertBefore(document.createElement('span'),c[i]);
      s.className = "separator";
      s.appendChild(document.createTextNode("|"));
      i++; // IMPORTANT! Adding a node requires us to manually iterate forward one step!
    }
  }
}
于 2012-12-18T21:42:39.840 に答える