Получить id объекта с помощью jQuery

Question

есть кусок html

    <div class='row'>
      <div class='col-md-1' style='width:60px'>Год:</div>
      <div class='col-md-5' style='margin-top:-25px'>
        <ul id='year' class='pagination'>
            <li class='active' id='2016' onclick='year(this.id);'><a href='#'>2016</a></li>
        </ul>
      </div>
    </div>
    <div class='row'>
      <div class='col-md-1' style='width:60px'>Неделя:</div>
      <div class='col-md-5' style='margin-top:-17px'>
        <ul id='week' class='pagination'>
            <li id='2' onclick='week(this.id);'><a href='#'>2</a></li>
            <li id='3' class='active' onclick='week(this.id);'><a href='#'>3</a></li>
        </ul>
      </div>
    </div>

Пытаюсь получить значение активной недели

$("#week ul li.active").attr('id');

получаю 2016, т.е. показывает год, а не неделю. Не могу понять в чем косяк.

можете пример на jsfiddle сделать? судя по коду вам ничего не должно было вывестись ни год ни неделю — Grundy, Jan 20 '16 at 08:10

Grundy · Answer 1 · 2016-01-20T08:22:00.483

6

Это все из-за не правильного селектора

$("#week ul li.active")

данный селектор ищет список ul внутри элемента с id="week". А у вас сам ul имеет этот id.

Таким образом, нужно изменить этот селектор, сказав что мы ищем именно ul с таки id

$("ul#week li.active")

либо вообще опустить ul

$("#week li.active")

так как id должен быть уникальным на странице этого селектора достаточно

Что касается

получаю 2016, т.е. показывает год, а не неделю.

судя по предоставленному куску кода - вывод вашего селектора должен быть undefined.
Если вы получаете именно 2016, можно предположить, что данный кусок кода расположен внутри контейнера с id="week", т.е. на странице у вас как минимум два элемента с таким id.

Пример

console.log($("#week ul li.active").attr('id'));
$('body').append($("#week ul li.active").attr('id'));
console.log($("#week ul li.active"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="week">
<div class='row'>
    <div class='col-md-1' style='width:60px'>Год:</div>
    <div class='col-md-5' style='margin-top:-25px'>
      <ul id='year' class='pagination'>
        <li class='active' id='2016' onclick='year(this.id);'><a href='#'>2016</a></li>
      </ul>
    </div>
  </div>
  <div class='row'>
    <div class='col-md-1' style='width:60px'>Неделя:</div>
    <div class='col-md-5' style='margin-top:-17px'>
      <ul id='week' class='pagination'>
        <li id='2' onclick='week(this.id);'><a href='#'>2</a></li>
        <li id='3' class='active' onclick='week(this.id);'><a href='#'>3</a></li>
      </ul>
    </div>
  </div>
</div>

edited Jan 20 '16 at 08:22

answered Jan 20 '16 at 08:12

Grundy

81,538

$("#week li.active") выводит 20163. заработало $("ul#week li.active") – thecoder Jan 20 '16 at 08:21
@thecoder, а какая версия jQuery используется? Так же обратите внимание на дополнение в вопросе – Grundy Jan 20 '16 at 08:22
jquery 1.11.3. Оказалась, что на странице два контейнера с id='week', исправил и код $("#week li.active") сработал. Надо быть внимательнее. – thecoder Jan 20 '16 at 08:32
"либо вообще опустить ul" -- а li для чего отставили? – Stack Jan 20 '16 at 08:33
@Stack, потому что класс может быть на любом вложенном элементе – Grundy Jan 20 '16 at 08:35
"потому что класс может быть на любом вложенном элементе" -- именно поэтому можно не указывать имя тега. и li указывать не надо. посмотрите мой ответ. – Stack Jan 20 '16 at 08:37
@Stack, я имел ввиду, что внутри liс классом active может быть другой элемент с этим же классом, но нам нужен именно li так как по разметке id нужно брать именно у него. – Grundy Jan 20 '16 at 08:39
"что внутри liс классом active может быть другой элемент с этим же классом," -- не думаю, что будут одинаковые li с одинаковыми active. а как их тогда различать? по смыслу - active - должен быть один в #week – Stack Jan 20 '16 at 08:46
@Stack, не понял как ваш комментарий относится к цитате в нем – Grundy Jan 20 '16 at 08:46
"не понял как ваш комментарий относится к цитате в нем" -- вы сказали что используете li.active, потому что "может быть другой элемент с этим же классом" -- а я говорю, что в ul два li с class=active - не будет, если руки не кривые. – Stack Jan 20 '16 at 08:52
Давайте продолжим обсуждение в чате. – Grundy Jan 20 '16 at 08:53

Stack · Accepted Answer · 2016-01-20T08:43:28.637

В html ошибка: 3</a>/li>, а должно быть 3</a></li>

Чтобы получить 3, пишете так:

var v = $("#week .active").text();

или так

var v = $("#week .active").attr("id"):

если на странице несколько тегов с id="week", и надо получить последний, то так

var v = $("#week .active").last().attr("id");

UPDATE

Т.к. в селекторе "#week .active" не указан тег li, то селектор будет работать, даже если изменить html на следующий:

<div class='col-md-5' style='margin-top:-17px' id='week' >
  <div id='5' class='active' onclick='week(this.id);'><a href='#'>5</a>
</div>

score 4 · Answer 3 · answered Jan 20 '16 at 08:12

4

У вас здесь ошибка:

$("#week ul li.active").attr('id');

ID week это и есть список ul, должно быть так:

$("#week li.active").attr('id');

answered Jan 20 '16 at 08:12

Ihor Tkachuk

1,306

score 0 · Answer 4 · answered Jan 20 '16 at 09:36

0

Эх.. Никто не вспоминает про prop...

$("#week .active").prop('id');

answered Jan 20 '16 at 09:36

Qwertiy

123,725

attr работает с html, а prop работает - с dom. из-за prop может быть путаница. т.к. не все атрибуты из html транслируются в dom – Stack Jan 20 '16 at 09:47
@Stack, да они работают с разными вещами и предназначены для разных целей. В данном случае они оба будут работать, но в общем случае заменять prop на attr даже для того, что есть в атрибутах, неверно. – Qwertiy Jan 20 '16 at 10:11

Получить id объекта с помощью jQuery

4 Answers4