User Interface Expert Question: Download UI Developer PDF
With jQuery, construct an array that has the values ["A", "B", "C", "D", "E", "F"] by getting the letters stored in the following html elements and pushing them into the array?
<div class="select-container" data-letter="A">
B
<div class="select-wrapper">
<ul>
<li id="select-first">D</li>
<li></li>
<li>E</li>
<li></li>
C
</ul>
</div>
<div>
<span>F</span>
</div>
</div>
Answer:
var letterArray = [];
// A
letterArray.push($('.select-container').data("letter"));
// B
var b = $('.select-container').contents().filter(function() {
return this.nodeType === 3 && this.nodeValue.trim() !== '';
}).text().trim();
letterArray.push(b);
// C
var c = $('.select-wrapper ul').contents().filter(function() {
return this.nodeType === 3 && this.nodeValue.trim() !== '';
}).text().trim();
letterArray.push(c);
// D
letterArray.push($('#select-first').text());
//E
letterArray.push($('.select-wrapper li').eq(2).text());
// F
letterArray.push($('.select-container > div:last-child span').text());
// Console Log the array.
console.log(letterArray);
// A
letterArray.push($('.select-container').data("letter"));
// B
var b = $('.select-container').contents().filter(function() {
return this.nodeType === 3 && this.nodeValue.trim() !== '';
}).text().trim();
letterArray.push(b);
// C
var c = $('.select-wrapper ul').contents().filter(function() {
return this.nodeType === 3 && this.nodeValue.trim() !== '';
}).text().trim();
letterArray.push(c);
// D
letterArray.push($('#select-first').text());
//E
letterArray.push($('.select-wrapper li').eq(2).text());
// F
letterArray.push($('.select-container > div:last-child span').text());
// Console Log the array.
console.log(letterArray);