获取元素数组中的每个元素值

Question

I need to find elements value inside elements array. Note, that there are many <a> elements, but only one <span id="attendees"> inside one <a> .

As following example:

HTML:

<a id="meetingItem_{{meeting.id}}" onclick="AuthorityCheck()"> Item

      <span id="attendees" style="visibility:collapse;" >{{meeting.attendees}}</span>
</a>

Javascript:

function AuthorityCheck(){

          var items = $('*[id^="meetingItem_"]');
          for (var i = 0; i < items.length; i++){
               var people = items[i].id.indexOf("attendees"); // I need to find span value here, but get undefined.
          }
    }

It can be with jQuery as well, but I would prefer Javascript. :)

Answer 1

function AuthorityCheck()
{
      var items = document.querySelectorAll('*[id^="meetingItem_"]');
      for (var i = 0; i < items.length; i++)
      {
           var people = document.getElementById("attendees").innerHTML;  
      }
}

This solution is fully vanilly and uses no jQuery. innerHTML is uses because it gives the content back in every browser. If there is HTML that shouldn't be retrieved. you should use innerText or textContent. Change the line to this:

 var people = document.getElementById("attendees").textContent || document.getElementById("attendees").innerText; 

On a side note: Id is unique for the complete DOM tree . That means if you have multiple a elements with attendees span in it. The code will not work properly since there are multiple spans with id = attendees . You can circumnavigate this by using attributes or classes.

 <span data-type="attendees" style="visibility:collapse;" >{{meeting.attendees}}</span>

function AuthorityCheck()
{
      var items = document.querySelectorAll('*[id^="meetingItem_"]');
      for (var i = 0; i < items.length; i++)
      {
           var people = items[i].querySelectorAll("span[data-type='attendees']")[0].innerHTML;  
      }
}

Answer 2

Have you tried:

var people = document.getElementById("attendees").textContent;

?

Or the cross-browser-friendly:

var people = $("#attendees").text();

Answer 3

If the the item has the 'attendess' id just take the value of that element, if your element is an span you can store your value in a data-attribute :

JS

 function AuthorityCheck(){
      var items = $('*[id^="meetingItem_"]');
        for (var i = 0; i < items.length; i++){
          if (items[i].id.indexOf("attendees") !== -1) {
            var people = items[i].getAttribute('data-value');
          }
        }
    }

HTML

<span id="attendees" data-value="your value">

Answer 4

how about this

var people = [];
$('*[id^="meetingItem_"]').each(function (index) {
    people[index] = $(this).find('span#attendees').html();
});