How do i add an attr using javascript

Question

How do i add an attr using javascript:

Here is the code:

<ul class="nav nav-tabs">
  <li class="active">
    <a href="#tab_1_4" data-toggle="tab" id="8" onclick="TableIdByNew(this.id)"><span class="badge badge-default" id="sipp-count">0</span> New </a>

  </li>
  <li>
    <a href="#tab_1_2" data-toggle="tab" id="9" onclick="TableIdByInProgress(this.id)"><span class="badge badge-default" id="sass-count">0</span> InProgress </a>
  </li>
  <li>
    <a href="#tab_1_3" data-toggle="tab" id="10" onclick="TableIdByClosed(this.id)"><span class="badge badge-default" id="sass-counts">0</span> Closed </a>
  </li>
</ul>

I want to add the :

  $("8").attr("aria-expanded", "true");
  $("9").attr("aria-expanded", "false");
  $("10").attr("aria-expanded", "false");

but this is not working.

here is the table:

<div class="tab-pane active in" id="tab_1_4" style="display:none">
                        <p>
                            <div class="portlet box">
                                <div class="portlet-title">


                                    <table class="table table-striped table-bordered dt-responsive table-hover" width="100%" id="AdminTicketId4" cellspacing="0">
                                        <thead>


                                            <tr>
                                                <th> Date Created </th>
                                                <th> Title </th>
                                                <th> User Name </th>
                                                <th> User Email </th>
                                                <th> Assigned To </th>
                                                <th>Importancy</th>
                                                <th> Status </th>
                                            </tr>
                                        </thead>

                                    </table>

                                </div>
                            </div>
                        </p>
                    </div>

the table is here:

this is the first table okay.

how do i solve??

where is the wrong???

Answer 1

jQuery selectors work like CSS selectors.

To select an element by its ID ( this_is_an_id ), use $('#this_is_an_id') . Mind the # - without it, you would be matching an element of the type this_is_an_id . Think of $('li') as an example that makes sense.

Answer 2

 $("#8").attr("aria-expanded", "true"); $("#9").attr("aria-expanded", "false"); $("#10").attr("aria-expanded", "false"); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="nav nav-tabs"> <li class="active"> <a href="#tab_1_4" data-toggle="tab" id="8" onclick="TableIdByNew(this.id)"><span class="badge badge-default" id="sipp-count">0</span> New </a> </li> <li> <a href="#tab_1_2" data-toggle="tab" id="9" onclick="TableIdByInProgress(this.id)"><span class="badge badge-default" id="sass-count">0</span> InProgress </a> </li> <li> <a href="#tab_1_3" data-toggle="tab" id="10" onclick="TableIdByClosed(this.id)"><span class="badge badge-default" id="sass-counts">0</span> Closed </a> </li> </ul> 

Answer 3

您已经指定了id =“ 8” ，依此类推，因此必须将“＃”与JQuery一起使用，请尝试以下操作：

$("#8").attr("aria-expanded", "true");

Answer 4

 $("a[id=8]").attr("aria-expanded", "true"); $("a[id=9]").attr("aria-expanded", "false"); $("a[id=10]").attr("aria-expanded", "false"); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="nav nav-tabs"> <li class="active"> <a href="#tab_1_4" data-toggle="tab" id="8" onclick="TableIdByNew(this.id)"><span class="badge badge-default" id="sipp-count">0</span> New </a> </li> <li> <a href="#tab_1_2" data-toggle="tab" id="9" onclick="TableIdByInProgress(this.id)"><span class="badge badge-default" id="sass-count">0</span> InProgress </a> </li> <li> <a href="#tab_1_3" data-toggle="tab" id="10" onclick="TableIdByClosed(this.id)"><span class="badge badge-default" id="sass-counts">0</span> Closed </a> </li> </ul> 

Use attribute selecotr like [id=8] where id=8

Description: Selects elements that have the specified attribute with a value exactly equal to a certain value.

Or you can change your id to not start with number and just use # to select the ID

Answer 5

You asked how to add them in Javascript, not in jQuery. This is how it is done in Javascript ( demo ):

<ul>
  <li><a id="8">New</a></li>
  <li><a id="9">InProgress</a></li>
  <li><a id="10">Closed</a></li>
</ul>

<script>
document.getElementById('8').setAttribute('aria-expanded', 'true');
document.getElementById('9').setAttribute('aria-expanded', 'false');
document.getElementById('10').setAttribute('aria-expanded', 'false');
</script>

You probably meant jQuery, but please note that you you might not need jquery.com . Javascript has come a long way.