Discussion :

[Valadone]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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">
   <!-- Enfant non présent donc je le crée -->
</div>

Je préfère le faire sans jQuery pour pouvoir maintenir ce code dans la durée.

Merci la communauté !

[Valadone]

J'ai tenté quelque chose comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

[danielhagnoul]

Exemple :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ) );
  }
}

[Valadone]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[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.

[Valadone]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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
         ....
});

[Valadone]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

[NoSmoking]

Bonjour,

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

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

elemEnfant.id = "taboola";

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

Passe par des « class ».

[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

[Valadone]

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

Merci