0
votes

Comment ajouter n'importe quel élément avec la classe à la première instance d'une autre classe en fonction de son emplacement sur la page?

Mon cms em> strong> utilise des widgets pour afficher des produits et je ne peux pas manipuler le code dans ces widgets, mais je peux ajouter du code autour d'eux. Je souhaite ajouter des blocs HTML sous les widgets et utiliser js em> strong> pour supprimer, cloner et ajouter au code à l'intérieur des widgets. La règle serait que les blocs HTML auraient besoin de s'ajouter à la première instance d'une classe dans le code avant chaque bloc.

Je ne peux que rendre ce travail en ce moment en utilisant un simple configurage là où il n'y a qu'un seul widget avec un bloc avec un bloc: p>

<div> <div> <div> <ol class="widget">....</ol> </div> </div> </div>

javascript jquery html

2 commentaires

S'il vous plaît vérifier ma solution

Cela fonctionnera-t-il s'il y a 3 divs entourant la liste comme celle-ci? Il semble casse dans ce cas ... jsfiddle.net/2OBXHC35

3 Réponses :

0
votes

itérer sur chaque .block code> séparément et recherchez le précédent .widget code> au lieu d'utiliser des index:

p>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<ol class="widget">
  <li>Item A</li>
  <li>Item B</li>
</ol>
<!-- END UNTOUCHABLE WIDGET CODE -->

<li class="block">Item C</li>


<!-- BEGIN UNTOUCHABLE WIDGET CODE -->

<ol class="widget">
  <li>Item X</li>
  <li>Item Y</li>
</ol>
<!-- END UNTOUCHABLE WIDGET CODE -->

<li class="block">Item Z</li>

0 commentaires

1
votes

L'idée principale est de trouver chaque .block code>, puis recherchez le précédent .widget code> puis appendez le .block code> au .Widget code> trouvé.

`Comment pouvons-nous faire cela? h3>`

Bien juste suivre cette idée: p>


 Obtenez chaque  .block  code> avec  $ (bloc '). Chaque ()  code>  li>
 Supprimer  .block  code> hors du DOM en utilisant  $ (this) .Remove ();  code>  li>
 Ajoutez le  .block  code> au précédent  .widget  code> avec  $ ("widget '). EQ (index) .Append (bloc);  Code>  li>
 ol>   p> 


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!-- BEGIN UNTOUCHABLE WIDGET CODE -->
<ol class="widget">
  <li>Item A</li>
  <li>Item B</li>
</ol>

<!-- END UNTOUCHABLE WIDGET CODE -->
<li class="block">Item C</li>


<!-- BEGIN UNTOUCHABLE WIDGET CODE -->
<ol class="widget">
  <li>Item X</li>
  <li>Item Y</li>
</ol>

<!-- END UNTOUCHABLE WIDGET CODE -->
<li class="block">Item Z</li>

2 commentaires

Avez-vous vraiment copié et coller littéralement des messages répondant, puis modifier quelques identifiants?

Utiliser la méthode .eq () a fonctionné pour moi dans le scénario mis à jour. Merci!

0
votes

Les autres réponses ne décrivent pas ce qui a conduit à cela ne fonctionne pas. Donc, c'est mon intention de cette réponse.

de la documentation de jQuery sur la .eq () méthode:

Compte tenu d'un objet JQuery qui représente un ensemble d'éléments DOM, le .eq () méthode construit un nouvel objet JQuery d'un élément dans ce Ensemble . L'indice fourni identifie la position de cet élément dans le ensemble. Cela entraîne cet appel jQuery ("widget '). EQ (1) .append (bloc); fait exactement comme vous le décrivez. Vous aurez besoin d'itération sur le bloc block ou le widget quel que soit la plus sens pour vous.



                                                                    
                                    
                                    
                                        0 commentaires


            
                
		    
                    Articles qui pourrait vous intéresser :
                                            
                            Impossible d'importer le module "@ angular / material"                        
                        
                                            
                            Interaction profonde avec break and catch                        
                        
                                            
                            Utilisation de node.js comment renommer tous les fichiers d'un dossier                        
                        
                                            
                            Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO