获取元素的id

Question

我想获取活动标签的ID。我的代码不起作用。帮助

＆＃13;

＆＃13;

//if it's the second tab, refresh it
var liID = $('#menu').hasClass('active').attr(id);
console.log(liID);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="nav nav-tabs" role="tablist" id="menu">
  <li role="presentation" class="active">
    <a href="#container" data-toggle="tab" aria-controls="step1" role="tab" title="Container">
      <span class="round-tab">
                                <i class="fa fa-archive"></i>
                            </span>
    </a>
  </li>
  <li role="presentation" class="disabled">
    <a href="#parameters" data-toggle="tab" aria-controls="step2" role="tab" title="Parameters">
      <span class="round-tab">
                                <i class="glyphicon glyphicon-pencil"></i>
                            </span>
    </a>
  </li>
  <li role="presentation" class="disabled">
    <a href="#results" data-toggle="tab" aria-controls="step3" role="tab" title="Results">
      <span class="round-tab">
                                <i class="glyphicon glyphicon-ok"></i>
                            </span>
    </a>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您没有选择处于活动状态且缺少引号的li。你正在寻找＆＃34;菜单＆＃34;元素处于活动状态，您可以读取其值。

$('#menu').find('.active').attr('id')

或

$('#menu .active').attr('id')

Answer 2

id必须在引号中，否则它被视为变量，您尚未声明。

接下来，您尝试获取ID是不正确的，因为 .hasClass() 会返回一个布尔值，而不是具有该类的元素，因此在返回值上调用.attr()将失败。

最后，您的active元素甚至还没有id。

这是更正后的版本：

＆＃13;

＆＃13;

//if it's the second tab, refresh it
if($('#menu li').hasClass('active')){
  var liID = $('#menu li.active').attr("id");
  console.log(liID);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="nav nav-tabs" role="tablist" id="menu">
  <li role="presentation" class="active" id="HELLO">
    <a href="#container" data-toggle="tab" aria-controls="step1" role="tab" title="Container">
      <span class="round-tab"><i class="fa fa-archive"></i></span>
    </a>
  </li>
  <li role="presentation" class="disabled">
    <a href="#parameters" data-toggle="tab" aria-controls="step2" role="tab" title="Parameters">
      <span class="round-tab"><i class="glyphicon glyphicon-pencil"></i></span>
    </a>
  </li>
  <li role="presentation" class="disabled">
    <a href="#results" data-toggle="tab" aria-controls="step3" role="tab" title="Results">
      <span class="round-tab"><i class="glyphicon glyphicon-ok"></i></span>
    </a>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

但实际上，这应该更简单：

＆＃13;

＆＃13;

// Just query for the active element and then use it:
console.log($('#menu li.active').attr("id"));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="nav nav-tabs" role="tablist" id="menu">
  <li role="presentation" class="active" id="HELLO">
    <a href="#container" data-toggle="tab" aria-controls="step1" role="tab" title="Container">
      <span class="round-tab"><i class="fa fa-archive"></i></span>
    </a>
  </li>
  <li role="presentation" class="disabled">
    <a href="#parameters" data-toggle="tab" aria-controls="step2" role="tab" title="Parameters">
      <span class="round-tab"><i class="glyphicon glyphicon-pencil"></i></span>
    </a>
  </li>
  <li role="presentation" class="disabled">
    <a href="#results" data-toggle="tab" aria-controls="step3" role="tab" title="Results">
      <span class="round-tab"><i class="glyphicon glyphicon-ok"></i></span>
    </a>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 3

用引号包装id。 hasClass返回一个布尔值。所以

var liID = $('#menu li.active').attr('id');

将liID设置为具有父＆＃34;菜单＆＃34;的li元素的id。并且如果有活动的课程。