jquery confusing code

Question

I am learning Jquery and Javascript from web examples. I have a good working knowledge but some code still trips me up. The following code is used for a shopping cart to hide the check out button and replace with a div displaying a message about minimum cart requirements. There is a part of the code throwing me off though.

function getCollectionCount() {
  var totalCollectionCount = 0;    
  var collection = $('td[alt*="Collection"]');
  for (var i = 0; i < collection.length; i++) {
    var curVal = $(collection[i]).find("select").val();
    if (curVal != undefined){
      totalCollectionCount += parseInt(curVal);
    }
  }

What does this part mean?

var collection = $('td[alt*="Collection"]');

Answer 1

td[alt*="Collection"] selects all <td> elements whose alt attribute contains Collection, such as:

<td alt="Collection"></td>
<td alt="CollectionFoo"></td>
<td alt="BarCollection12324343"></td>

but not

<td></td>
<td alt=""></td>
<td alt="Foo"></td>

---

Side note: this is a pretty basic question that could easily be answered by read the jQuery selectors API documentation:

• element selector
• attribute-contains selector

Please do try to research before you ask!

Answer 2

This is a jQuery attribute selector clause. It's selecting any td element which has an atrtibute named alt whose string contains the value Collection.

Contains Selector: http://api.jquery.com/attribute-contains-selector/

jQuery has a number of useful attribute selectors. Here is the main reference page for them. Very much worth the read if you're just getting started with jQuery

• http://api.jquery.com/category/selectors/attribute-selectors/