Question

我有一长串名称，我想在给定类的第一个元素中添加一个锚点。

<ul id="the_names">
    <li class="names letter-A">Ames, Aldrich</li>
    <li class="names letter-A">Andrews, Richard</li>
    <li class="names letter-B">Barber, Deborah</li>
    <li class="names letter-B">Brown, Bobby</li>
    <li class="names letter-C">Clark, Richard</li>
    <li class="names letter-C">Coates, Charles</li>
    <li class="names letter-D">Day, Doris</li>
    <li class="names letter-D">Dole, Elizabeth</li>
</ul>

我已经尝试了几种使用jQuery来获取li所使用的所有类名的方法，但所有这些方法都很简短，通常只返回names letter-A。

我最终想要的是在letter-A类的第一次出现时的锚标记，在字母B，字母C等处相同：

<ul id="the_names">
    <li class="names letter-A"><a name="letter-A">Ames, Aldrich</a></li>
    <li class="names letter-A">Andrews, Richard</li>
    <li class="names letter-B"><a name="letter-A">Barber, Deborah</a></li>
    <li class="names letter-B">Brown, Bobby</li>
    <li class="names letter-C"><a name="letter-A">Clark, Richard</a></li>
    <li class="names letter-C">Coates, Charles</li>
    <li class="names letter-D"><a name="letter-A">Day, Doris</a></li>
    <li class="names letter-D">Dole, Elizabeth</li>
</ul>

感谢您的帮助。

Answer 1

您可以使用以下示例代码。

var object = $('.names.letter-A').first();
var text = object.html();
object.html($("<a></a>")
          .attr('href', '#')
          .attr('name', object.attr('class').split(" ").pop())
          .text(text));

Answer 2

获得jQuery选择器的结果后，您可以使用get()（http://api.jquery.com/get/）来获取所需的元素。

或者，如果您不需要访问get()为您提供的基础DOM元素，则可以使用first()（http://api.jquery.com/first/）。

Answer 3

这是一个小提琴：http://jsfiddle.net/Lq3uf/

的jQuery

//Inititalize an array to hold the classes
var importantClasses = [];

//Enumerate the array with the classes
$("#the_names li.names").each(function () {
    var myClass = $(this).attr("class").split(" ")[1];
    if (importantClasses.indexOf(myClass) === -1) {
        importantClasses.push(myClass)
    }
})

$.each(importantClasses, function (index, value) {
    var item = $("." + value).eq(0)
    var html = item.html();
    item.html("<a name='" + value + "'>" + html + "</a>")
})

Answer 4

我建议，给出以下HTML：

<ol id="navigation"></ol>

<ul id="the_names">
    <li class="names letter-A">Ames, Aldrich</li>
    <li class="names letter-A">Andrews, Richard</li>
    <li class="names letter-B">Barber, Deborah</li>
    <li class="names letter-B">Brown, Bobby</li>
    <li class="names letter-C">Clark, Richard</li>
    <li class="names letter-C">Coates, Charles</li>
    <li class="names letter-D">Day, Doris</li>
    <li class="names letter-D">Dole, Elizabeth</li>
</ul>

以下jQuery：

var navigation = $('#navigation'),
    nav, link;

// gets all the `li` elements that contain the string 'letter-' in their class attribute:    
$('li[class*="letter-"]').filter(function(){
    /* filters those elements, keeping only those elements that meet the following criteria:

       this.previousElementSibling === null
       will match only the first element of the list, by definition
       also the first instance of the first letter.

       this.previousElementSibling.className !== this.className
       if the className of this element is different from the className
       of the previous element, we assume a different letter. This does
       assume that the class-names will be arranged in identical order.
    */
    return this.previousElementSibling === null || this.previousElementSibling.className !== this.className;
}).each(function(){
    var firstLetter = $(this).text()[0].toUpperCase();

    // setting the id, instead of using a named-anchor        
    this.id = 'first-' + firstLetter;

    // creating an `li` element, appending to the '#navigation' element
    nav = $('<li />').appendTo(navigation);
    /* creating an 'a' element, setting the href to target the
       newly-created 'id', and setting the text to the firstLetter variable */
    link = $('<a />', {'href' : '#first-' + firstLetter, 'text' : firstLetter}).appendTo(nav);
});

JS Fiddle demo

参考文献：

appendTo()。
attribute-contains selector ([attribute*=value])。
each()。
filter()。

将锚元素添加到列表中的第一个className

4 个答案: