Vérifier que dans un tableau d'élément HTML une div est présente dans l'une de ses entrées

Version imprimable

Bonsoir,

J'ai besoin de savoir si dans un tableau de ce style :

a = ["<div class='parent'></div>","<div class='parent'></div>","<div class='parent'></div>","<div class='parent'></div>"];

De vérifier que dans chacune de ces divs parents j'ai un élément enfant <div id="enfant"></div>.

Je souhaite vérifier que celle-ci existe et que si elle n'existe pas je l'a crée dans la div parent.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <div class="parent"> <div class="enfant"></div> </div> <div class="parent"> <div class="enfant"></div> </div> <div class="parent"> <div class="enfant"></div> </div> <div class="parent">  </div>
Je préfère le faire sans jQuery pour pouvoir maintenir ce code dans la durée.

Merci la communauté !

J'ai tenté quelque chose comme ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 var a = document.getElementsByClassName("parent"); document.addEventListener("scroll", function(){ for(i=0;i < a.length; i++){ var c = a[i].getElementsByClassName("enfant"); if(c.length === 0){ var d = document.createElement("div"); d.className = "deux"; a[i].appendChild(d); } } });
Mais il m'en rajoute pas 1 fois mais à chaque fois que je scroll il me rajoute 1 div en plus au même endroit ...

J'ai oublié quelque chose ?

Exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<div class="parent">
   <div class="enfant">division enfant</div>
</div>
<div class="parent">
   <div class="enfant">division enfant</div>
</div>
<div class="parent">
   <div class="enfant">division enfant</div>
</div>
<div class="parent">
   <!-- Enfant non présent donc je le crée -->
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
let
  elemEnfant = document.createElement( "div" );
 
elemEnfant.classList.add( "enfant" );
elemEnfant.textContent = "division enfant";
 
for ( let item of document.querySelectorAll( "div.parent" ) ){
  if (  item.querySelector( "div.enfant" ) === null ){
    item.appendChild( elemEnfant.cloneNode( true ) );
  }
}

J'ai tourné ton script dans tous les sens pour qu'il convienne à mon besoin est pour le moment j'ai pas toujours la bonne intégration ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
(function(){
  try{
  document.addEventListener("scroll", function(){
    var x = document.getElementsByClassName("page-content-leftcol");
    for(i=0;i < x.length; i++){
      if (x[i].querySelector("#widget-thumbnails") === null){
      var t = document.querySelectorAll(".comment-part"); 
      var widget_id = JSON.parse('{"wid_id":"id_account"}');
 
	 if (t.length && typeof widget_id === "object"){
	  t[i].insertAdjacentHTML('beforebegin', '<div id="widget-thumbnails"></div>');
      window._widget = window._widget || [];
      _widget.push({article:'auto'});
      !function (e, f, u) {
        e.async = 1;
        e.src = u;
        f.parentNode.insertBefore(e, f);
      }(document.createElement('script'), 
        document.getElementsByTagName('script')[0], 
        '//cdn.widget.com/libtrc/'+ widget_id['wid_id'] +'/loader.js');
      _widget.push({mode: 'thumbnails-d', container: 'widget-thumbnails', placement: 'Below Article Thumbnails', target_type: 'mix'});  
      _widget.push({flush: true});
	 }
    }
  }
  });
  } 
  catch(e){
      console.error("--- Widget : Something Bad Happened", e);
  }
})();

Ca fonctionne pratiquement avec ça. Juste qu'il crée la div toujours au même endroit ... Et pas à chaque page-content-leftcol qui apparaissent en infinite scroll.

27/09/2016, 10h24
danielhagnoul

Mon code répond à une question précise, posée au message 1 : "vérifier que dans chacune des divisions "parents" il y a une division "enfant" et la créer si elle n'existe pas".

Je ne vois pas le rapport entre cette question et le code du message 4.

Le code que tu m'as donné répond à ma question et devait par la suite être intégré dans le code qui est ici.

Je dois vérifier que la div widget-thumbnails n'existe pas encore pour la créer.

Mon code le fait mais il crée cette div a la mauvaise place. En gros il fait tout ici :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
(function(){
  try{
  document.addEventListener("scroll", function(){
    var x = document.getElementsByClassName("page-content-leftcol");
    for(i=0;i < x.length; i++){
      if (x[i].querySelector("#widget-thumbnails") === null){
      var t = document.querySelectorAll(".comment-part"); 
      var widget_id = JSON.parse('{"wid_id":"id_account"}');
 
	 if (t.length && typeof widget_id === "object"){
	  t[i].insertAdjacentHTML('beforebegin', '<div id="widget-thumbnails"></div>'); // Tout le temps en t[0] alors que j'incrémente
         ....
});

Avec le code qu'on m'a donné ça ferait quelque chose comme ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 (function(){ document.addEventListener("scroll", function(){ for (var item of document.querySelectorAll(".un")){ if (item.querySelector("#deux") === null ){ var elemEnfant = document.createElement( "div" ); elemEnfant.id = "taboola"; elemEnfant.textContent = "division enfant"; item.appendChild(elemEnfant.cloneNode(true)); } } }); })();
Mais j'ai des divs qui se crée à l'infini alors que je ne veux qu'elle se crée uniquement lorsque qu'elle n'est pas présente dans la div voulu...

Personne pour une solution ?

01/10/2016, 10h50
NoSmoking

Bonjour,

Citation:

if (item.querySelector("#deux") === null )

quand est ce que tu crées cet élément ?

Citation:

elemEnfant.id = "taboola";

est ce à dire que tu génères des éléments possédant la même ID.

Passe par des « class ».
03/10/2016, 09h50
Valadone

Hello,

Oui je génère des divs avec la même ID mais ça n'est pas gênant et le script que j'ai également à inclure dans chaque article de l'infinite scroll m'impose un ID.

Y'a-t-il une autre erreur que tu aurais vu et qui pourrais être la cause de mon problème ?

J'ai fait un fiddle pour que ce soit plus facile de m'aider : https://jsfiddle.net/to6ygxmb/1/
Une autre solution qui ne marche pas mieux mais qui pourrait m'aider si quelqu'un me disait ce qu'il ne va pas avec également : https://jsfiddle.net/to6ygxmb/2/

Je me pose une question si compliqué que ça pour que personne ne puisse m'aider :s ?

Merci
06/10/2016, 21h01
Valadone

C'est bon j'ai trouvé la solution à mon problème.

Merci :)