Блог

Главная - Вопросы по программированию - Использование javascript для вставки идентификатора в элементы списка

Использование javascript для вставки идентификатора в элементы списка

#javascript #jquery

#javascript #jquery

Вопрос:

Я возлюсь с колодой карт, которую сам сделал.Я настроил его так, что есть метод, который выкладывает карты по мастям в список, поэтому, если я хочу пики, я получаю <ol> все карты с пиками. Сейчас я пытаюсь присвоить каждому <li> элементу идентификатор в зависимости от того, какая это карта. Например, туз будет <li id="ace"><img src="ace_spades.gif"/></li> королем будет <li id="king"><img src="king_spades.gif"/></li> .Список приведен в порядке сверху вниз akqj1098765432 . Я пытался сделать это:

 var card_id=["ace","king","queen","jack","ten","nine","eight","seven","six","five","four", "three","two"];
var counter=0;
while (counter<=12)
    {
    $(document).ready(function(){
    $("li").eq(counter).attr("id", card_id[counter])
        });
    counter  ;
    }

но это не работает. На самом деле я раньше ничего не делал с javascript, кроме простых элементов jquery. Что я здесь не так понимаю?

Комментарии:

1. Совершенно не связанный вопрос: почему бы здесь не использовать цикл for? Мне кажется, цикл for был бы понятнее.

2. В вашем примере <li> для пробелов и сердечек имеют одинаковый идентификатор. Это никогда не сработает, потому что все идентификаторы должны быть уникальными.

Ответ №1:

Попробуйте это:

 $(document).ready(function(){
    var card_id = ["ace","king","queen","jack","ten","nine","eight","seven","six","five","four", "three","two"];
    $.each(card_id, function(i,id){
        $("li").eq(i).attr('id',id);
    });
});

Вы должны попытаться использовать только одну $(document).ready() функцию, и нет необходимости использовать while() цикл.

Ответ №2:

Я думаю, вам не нужно вызывать $(document).ready() функцию в while . Попробуйте это:

 var card_id=["ace","king","queen","jack","ten","nine","eight","seven","six","five","four", "three","two"];
var counter=0;
while (counter<=12){
    $("li").eq(counter).attr("id", card_id[counter]);
    counter  ;
 }

Ответ №3:

Вам не нужна функция document ready. Разместите свой скрипт непосредственно перед </body> и после jquery.js скрипт. У меня это работает.

Проверьте рабочий пример на http://jsfiddle.net/H8MeG/2 /

Ответ №4:

Первый из идентификаторов на веб-странице должен быть уникальным. Некоторые браузеры могут игнорировать идентификаторы элементов, которые уже использовались. Другие браузеры могут полностью выйти из строя… Второй перерыв. вам не следует использовать .eq() подобным образом. Вам определенно не следует добавлять 12 новых $ (document).готовые инструкции().

Вот более надежная версия и пример на jsfiddle

 var card_id=["ace","king","queen","jack","ten","nine","eight","seven","six","five","four", "three","two"];
$("#spades li").each(function(index){
    $(this).attr("class", card_id[index]);
    $(this).text(card_id[index]);
});

Я также добавил $(this).text(card_id[index]); , чтобы вы увидели, что это действительно работает. Попробуйте использовать классы для нескольких элементов, которые имеют одну и ту же характеристику.

Ответ №5:

зачем вы вообще возитесь с идентификаторами? вы знаете, что первый элемент — это туз, второй — король и так далее. ol.getElementsByTagName(‘li’)[12]=’двойка’