这是在JavaScript中使用两个循环的正确方法吗

Question

I am trying to check two things here, with two different for loops . One if a element has a attribute , that works! And the second loop should check if the alt tag is actually empty. I figured passing the first iterator value to the second would dispatch the second loop. But that doesn't work! Can someone help me out with this one?

function altChecker() {
    var doc = document,

        getStartedBtn = doc.getElementById('getStartedBtn');

        EventUtility.addHandler(getStartedBtn, 'click', function() {

        var all = doc.getElementsByTagName("IMG");

        console.log('success!');

        for (var i = 0, max = all.length; i < max; i++) {
            if (all[i].hasAttribute('alt')) {
                console.log('Yes, this has a ' + all[i].nodeName + ' tag!');
            } else {
                console.log('Sorry ' + all[i].nodeName + ' tag, doesn\'t have an alt tag!');
            }

        }
        for (var j = i, max2 = all; j < max2; j++) {
            if(! $(all[j]).attr('alt')){
                console.log('This is empty');
            } else {
                console.log('This aint');
            }
        };

    });
}

Answer 1

You can do it in one loop. Check for the value of alt after checking if the attribute exists.

Note that alt is a standard property of the img tag but not div . In the example I used .getAttribute for the the non-standard property. If I used img tags then .getAttribute could be replaced with .alt since that's a standard property of the tag. see comments.

 function altChecker() { var out = []; var doc = document; var all = doc.getElementsByTagName("div"); for (var i = 0, max = all.length; i < max; i++) { var id = all[i].id; if (all[i].hasAttribute('alt')) { out.push(id + ' has alt'); var value = all[i].getAttribute('alt'); if (value != "") { out.push(id + ' alt="' + value + '"'); } else { out.push(id + ' alt is empty'); } } else { out.push(id + ' does not have alt'); } } doc.getElementById('output').innerHTML = out.join("\\n"); } altChecker(); 

 <div id='a' alt='foo'>-</div> <div id='b' alt='bar'>-</div> <div id='c' alt=''>-</div> <div id='d'>-</div> <pre id='output'></pre> 

Answer 2

I don't think 2 loops are required

function altChecker() {
    var doc = document,

    getStartedBtn = doc.getElementById('getStartedBtn');

    EventUtility.addHandler(getStartedBtn, 'click', function() {

        var all = doc.getElementsByTagName("IMG");

        console.log('success!');

        for (var i = 0; i < all.length; i++) {
            if (all[i].hasAttribute('alt')) {
              if (all[i].alt === '') {
                  console.log('this has a ' + all[i].nodeName + ' tag BUT it is empty!');
              } else {
                  console.log('Yes, this has a ' + all[i].nodeName + ' tag and it is NOT empty!');
              }
            } else {
                console.log('Sorry ' + all[i].nodeName + ' tag, doesn\'t have an alt tag!');
            }

        }
    });
}

Answer 3

You're missing your .length property in the 2nd if:

max2 = all

Should be max2 = all.length

Answer 4

If you intended to loop though the all collection twice, you missed the length property on all in the second loop, and you need to start the j variable from 0.

for (var j = i, max2 = all; j < max2; j++) {

should be:

for (var j = 0, max2 = all.length; j < max2; j++) {

The two loops are completely independent and just iterate over the all collection; you write them in exactly the same way.

Mistakes like that are why I usually use functional idioms for looping:

$.each(all, function(idx, each){...});