Get a single TRUE or FALSE on multiple conditions

Question

I would like to perform the following in the variable img right below: Get true if ALL images (tag img) are EQUAL, or false IF ONE OR MORE DIFFERENT of the others. I tried loop for, but it does not work as expected, because I could not find a way to compare each index with the others and get a single true OR false. In the face of it, I had no idea what to do.

var img = '<img src="pic_1.jpg" />; <img src="pic_1.jpg" />; <img src="pic_1.jpg" />; <img src="pic_1.jpg" />'; // Todas as imagens são iguais  - Daria true
var img = '<img src="pic_1.jpg" />; <img src="pic_2.jpg" />; <img src="pic_1.jpg" />; <img src="pic_1.jpg" />'; // Uma imagem é diferente das outras - Daria false
var img = '<img src="pic_1.jpg" />; <img src="pic_1.jpg" />; <img src="pic_2.jpg" />; <img src="pic_2.jpg" />'; // Duas imagens são diferentes das outras - Daria false

img = img.split(';');

for (var i = 0; i < img.length; i++) {
console.log(img[i] != img[0]);
}

Answer 1

I suggest you use your browser and DOM to interpret that instead of using .split(';'). Anyway I leave a suggestion that can be adapted in case you want to use it anyway.

function verificar(str) {
    var div = document.createElement('div');
    div.innerHTML = str;
    var imagens = div.children;
    for (var i = 0; i < imagens.length; i++) {
        if (imagens[0].src != imagens[i].src) return false
    }
    return true;
}

jsFiddle: http://jsfiddle.net/3d384sdk/

this function takes a string as you have in the example, inserts it into a div that is used only in the browser memory and then compares if the first image and the following have the same src. Returns true if they all have, and false if at least one does not have.

Answer 2

You started out right in logic, but you missed three things:

• When you do split will have some img with space in front, to remove this just use .trim(). That’s why I was giving false in his, because he compared one without space in the front with another that had space in the front.

• You have set Dice [0] in the for, if you want to compare the current with the next one you initialize the for from the 1 and compares with the previous.

• Use a variable to control whether it is the same or not.

var img = '<img src="pic_1.jpg" />; <img src="pic_1.jpg" />; <img src="pic_1.jpg" />; <img src="pic_1.jpg" />'; // Todas as imagens são iguais  - Daria true
//var img = '<img src="pic_1.jpg" />; <img src="pic_2.jpg" />; <img src="pic_1.jpg" />; <img src="pic_1.jpg" />'; // Uma imagem é diferente das outras - Daria false
//var img = '<img src="pic_1.jpg" />; <img src="pic_1.jpg" />; <img src="pic_2.jpg" />; <img src="pic_2.jpg" />'; // Duas imagens são diferentes das outras - Daria false

img = img.split(';');

var igual = true;
for (var i = 1; i < img.length; i++) {
  
    // se alguma for diferente então já retorna falso
    if(img[i-1].trim() != img[i].trim()) {
        igual = false;
        break;
    }
  
}

console.log(igual);

Now if you want a more practical example to compare the src of the images, would do something like this:

function isImagensIguais() {
   var imgs = document.querySelectorAll('img');
  
   for (var i = 1; i < imgs.length; i++) {
      // se alguma for diferente então já retorna falso
      if(imgs[i-1].src != imgs[i].src) {
          return false;
      }
  }
  return true;
}

window.onload = function () {
  alert(isImagensIguais());  
}

<img src="pic_1.jpg" />
<img src="pic_1.jpg" />
<img src="pic_2.jpg" />
<img src="pic_2.jpg" />