Get each element value inside elements array

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. :)

Unless the HTML was made incorrectly, there should only be one id="attendees" on the entire page. — gen_Eric
– gen_Eric, Commented Jan 2, 2015 at 15:29
@ Taurib: An id value must be used on only one element on the entire page. It looks like you have multiple meetingItem_X elements, each of which has an id="attendees" in it. That's invalid HTML, you'll need to fix it (for instance, us a class). — T.J. Crowder
– T.J. Crowder, Commented Jan 2, 2015 at 15:31
Thank you for the id remark, I'll use them only as unique values :) — Taurib
– Taurib, Commented Jan 2, 2015 at 17:27

Mouser · Accepted Answer · 2015-01-02 15:41:17Z

2

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;  
      }
}

edited Jan 2, 2015 at 15:41

answered Jan 2, 2015 at 15:29

Mouser

13.3k3 gold badges30 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Oriol Over a year ago

getElementById is a method of Document.prototype, but not of Element.prototype

Taurib Over a year ago

Great, that second AuthorityCheck example was the way I was looking for! :)

JLRishe · Accepted Answer · 2015-01-02 15:28:25Z

1

Have you tried:

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

?

Or the cross-browser-friendly:

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

answered Jan 2, 2015 at 15:28

JLRishe

102k19 gold badges138 silver badges171 bronze badges

8 Comments

Barmar Over a year ago

textContent isn't portable.

Oriol Over a year ago

@Barmar What does "portable" mean?

JLRishe Over a year ago

@Barmar It's portable enough for me, but I've provided an alternative now.

Barmar Over a year ago

I must have it confused with something else, I thought it didn't work in Firefox.

gen_Eric Over a year ago

@Oriol: "Portable" means "works anywhere". In this case, it means .textContent only works in modern browsers and not in all browsers. .textContent works in every version of every browser except IE. It only works in IE 9+.

|

ianaya89 · Accepted Answer · 2015-01-02 15:29:32Z

0

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">

answered Jan 2, 2015 at 15:29

ianaya89

4,2613 gold badges29 silver badges34 bronze badges

2 Comments

Barmar Over a year ago

span doesn't have .value.

ianaya89 Over a year ago

@Barmar you are right, I did not noticed that was an span

Yakub · Accepted Answer · 2015-01-02 15:38:42Z

0

how about this

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

answered Jan 2, 2015 at 15:38

Yakub

2052 silver badges9 bronze badges

2 Comments

A. Wolff Over a year ago

Again, IDs must be unique on document context so this could be a workaround regarding invalid HTML markup BUT OP would have better to use valid HTML markup in first place

Yakub Over a year ago

yes i know but this is how used Taurib. I would like to use class or data-

Collectives™ on Stack Overflow

Get each element value inside elements array

4 Answers 4

2 Comments

8 Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

8 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related