Rechercher, obtenir et ajouter du code HTML à un élément

J'ai une chaîne qui contient du texte et quelques éléments HTML. Je veux trouver les éléments img qui ont la classe taille-vignette et ajouter du html autour d'elle.Rechercher, obtenir et ajouter du code HTML à un élément

Par exemple, de:

<img class="size-thumbnail wp-image-279 alignleft" title="fellaisworkinghard" src="workinghard-150x150.png" alt="" height="150" width="150">

<div style="width:150px;" class="article-image"> 
    <img class="size-thumbnail wp-image-279 alignleft" title="fellaisworkinghard" src="workinghard-150x150.png" alt="" height="150" width="150"> 
    <span style="width:150px;" class="article-image-content">BLABLA</span> 
</div>

Les largeurs sur les éléments div et de la portée sont prises à partir de la largeur de l'image. Quel est le meilleur moyen de le faire, et comment?

J'ai pensé à utiliser regex pour obtenir la hauteur mais je ne sais pas comment ajouter tout le reste sur la bonne position.

Source

2011-03-17 Patrik

* (liés) * [meilleures méthodes pour analyser HTML] (http://stackoverflow.com/questions/3577641/best-methods-to-parse-html/3577662 # 3577662) – Gordon

Depuis ce Wordpress étiqueté, le plus simple serait de changer cela à l'endroit où la balise img initiale est générée au lieu de la changer plus tard, par exemple changez le code PHP générant pour ajouter le balisage supplémentaire directement. – Gordon

@Gordon ouais j'écris une fonction de filtre pour ajouter ceci. Si je pouvais ajouter quelque chose avant, ce serait génial, mais comme je suis en train d'écrire un thème, je ne veux pas changer les fichiers racine. – Patrik

Vous pouvez utiliser l'élément DOM http://www.php.net/manual/en/class.domelement.php pour rechercher et manipuler du code HTML.

Aussi en utilisant et en recommandant http://framework.zend.com/manual/en/zend.dom.query.html Zend_Dom_Query pour trouver et manipuler html. Cela fonctionne parfaitement.

(Si vous voulez faire cette manipulation sur la même page, vous devez tampon, manipuler et tirer la chasse au navigateur.)

Source

2011-03-17 12:44:02 osm

Je n'ai jamais travaillé avec ça mais la page est dynamique donc le contenu est juste une chaîne. Jamais une page html. Il ressemble à ceci: Base de données -> mon code -> echo – Patrik

Ok je l'ai eu. Vous devez le changer à partir de votre modèle Wordpress. – osm

@Patrik peu importe (beaucoup) où c'est une page html complète ou juste un fragment. DOM peut gérer cela. Zend_Dom se trouve au-dessus de DOM et ajoute des sélecteurs CSS. – Gordon

Vous pouvez toujours jeter jQuery à elle. Ayez votre thème en file d'attente jquery, et ajoutez ceci à votre en-tête.

jQuery(document).ready(function() { 
    jQuery(".size-thumbnail").wrap("<div style='width:150px;' class='article-image'/>"); 
    jQuery(".size-thumbnail").after("<span style='width:150px;' " + 
            "class='article-image-content'>BLABLA</span>"); 
});

pas la solution la plus élégante, mais il aurait le résultat souhaité ...

Source

2011-03-17 17:53:47 smcphill

Rechercher, obtenir et ajouter du code HTML à un élément

Répondre

Questions connexes