0

I have a long list of names, and I want to add an anchor to the first element in a given class. 

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

I've tried several methods using jQuery to get all the class names used by the li's, but all are coming up short, usually just returning names letter-A.

What I want to end up with is an anchor tag at the FIRST occurrence of the class letter-A, same at letter-B, letter-C, etc.:

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

Thanks for the help.

4

4 回答 4

1

You can use the below sample code.

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));
于 2013-06-09T21:24:40.853 回答
0

once you have the results of a jQuery selector you can just use get() (http://api.jquery.com/get/) to get the element you need.

Alternatively, if you do not need to access the underlying DOM element that get() gives you, you can use first() (http://api.jquery.com/first/).

于 2013-06-09T21:17:20.960 回答
0

Here's a fiddle: 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>")
})
于 2013-06-09T21:27:56.250 回答
0

I'd suggest, given the following 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>

The following 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.

References:

于 2013-06-09T21:41:51.277 回答