Thoughts on why an array will not work

Question

I am switching classes on the links on my project page, and the class change seems to work when only a single id is used, however when the array "myArray" is used, nothing happens. Curious if anyone has any thoughts why. Here is the code I am working with:

var oldpage = $("#oldpage");
var phpscript = $("#phpscript");
var db = $("#db");
var nypl = $("#nypl");
var ppt = $("#ppt");
var myArray = [nypl, db, ppt, phpscript, oldpage];
$(function() {
  var classes = ["paris", "chateau", "violin", "create", "museum"];
  var id = $(myArray);
  var count = 0;

  function nextClass() {
    id.addClass(classes[count = ++count % classes.length]);
    id.removeClass(classes[count = ++count % classes.length]);
    setTimeout(nextClass, 300);
  }
  setTimeout(nextClass, 300);
  id.addClass(classes[0]);
  id.removeClass(classes[0]);
  console.log(id);
});

.paris {
  color: pink;
}
.violin {
  color: rgb(134, 134, 134);
}
.museum {
  color: red;
}
.create {
  color: orange;
}
.chateau {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="projects">
  <li><a href="http://web.simmons.edu/~duffp/lis489/indexver1.html" target="new" class="violin" id="oldpage">First iteration of this page</a>
  </li>
  <br />
  <li><a href="http://web.simmons.edu/~duffp/lis489/php/contactme.txt" target="new" id="phpscript" class="violin">PHP Mail script attached below.</a>
  </li>
  <br />
  <li><a href="http://web.simmons.edu/~duffp/lis489/Dufflibrary.php" target="new" id="db" class="violin">Searchable Database (In progress)</a>
  </li>
  <br />
  <li><a href="http://web.simmons.edu/~duffp/lis403/Duff_Song_Usability_ppt.ppt" target="new" id="nypl" class="violin">NYPL Usability Testing</a>
  </li>
  <br />
  <li><a href="http://web.simmons.edu/~duffp/lis403/Duff_Krim_Song_Evaluation_ppt.ppt" target="new" id="ppt" class="violin">Evaluation of Online Services</a>
  </li>
</ul>
</div>

I don't see how you are *using* `myArray` anywhere. My guess it you are not "using" it correctly. — Felix Kling, Apr 15 '15 at 21:02
`jQuery()`, [when provded an array](http://api.jquery.com/jQuery/#jQuery-elementArray), expects it to contain `Element`s rather than other `jQuery` collections. Try "[How to combine two jQuery results](http://stackoverflow.com/questions/323955/how-to-combine-two-jquery-results)." — Jonathan Lonowski, Apr 15 '15 at 21:06
@JonathanLonowski: That worked like a charm! If I only knew this three weeks ago would have saved me a few grey hairs. — Duffman, Apr 15 '15 at 21:36

score 1 · Answer 1 · answered Apr 15 '15 at 21:04

try this:

function nextClass() {
    for (var i = 0; i < myArr.length; i++) {
        myArr[i].addClass(classes[count = ++count % classes.length]);
        myArr[i].removeClass(classes[count = ++count % classes.length]);
        setTimeout(nextClass, 300);
    }
}

score 0 · Accepted Answer · answered Apr 16 '15 at 11:12

I found that the add function worked beautifully.. Posting answer below :

$(function () {
var links = $("#oldpage").add("#phpscript").add("#db").add("#nypl").add("#ppt");
var classes = ["paris" , "chateau" , "violin" , "create" , "museum"];
var count = 0;
 function nextClass () {
  links.addClass(classes[count = ++count % classes.length]);
  links.removeClass(classes[count = ++count % classes.length]);
  setTimeout(nextClass, 30000);
  }
setTimeout(nextClass, 30000);
links.addClass(classes[0]);
links.removeClass(classes[0]);
console.log(links);
});

Thoughts on why an array will not work

2 Answers2