Bonjour à tous !

Je me retrouve confronté à un problème dont je n'arrive pas à trouver de solution voir même je doute de la possibilité d'une solution.

Si j'ai bien compris en javascript  il est possible de sélectionner des divisions en fonction de leurs ID/classe comme en CSS. Seulement j'aimerais pouvoir gérer "l'arborescence" pour retrouver par exemple la balise parent de 2 niveaux au dessus. Bon assez parlé je vous expose mon problème, voici la partie HTML qui m'intéresse sans le superflue :

<DIV id=WebPartWPQ3 style="OVERFLOW: auto; POSITION: relative; DISPLAY: block" allowDelete="false" width="100%" HasPers="false" WebPartID="567d6551-a8ca-4c75-8b85-cf001ea99735" allowExport="false">
    <SPAN></SPAN>
    <SCRIPT type=text/javascript>function _initTRAWebPartWPQ3()</SCRIPT>
    <DIV class=ms-acal-rootdiv>
        <DIV>
            <DIV title="11:00 - 12:00 En cours" class=ms-acal-item style="HEIGHT: 39px; WIDTH: 129px; POSITION: absolute; LEFT: 287px; TOP: 80px" _index="0,0">
                <DIV class=ms-acal-sdiv>
                    <DIV class=ms-acal-time>11:00 - 12:00</DIV>
                    <DIV class=ms-acal-title>
                        <A onclick="EditLink2(this,'WPQ3');return false;" href="/regions/NVAQ/Reservation-Ressources/Salles-ENORA/Lists/CalendrierSallesENORA/DispForm.aspx?ID=3">En cours</A>
                    </DIV>
                </DIV>
            </DIV>     
        </DIV>
        <DIV>
            <DIV title="12:00 - 13:00 En cours" class=ms-acal-item style="HEIGHT: 39px; WIDTH: 128px; POSITION: absolute; LEFT: 420px; TOP: 226px" _index="2,0">
                <DIV class=ms-acal-sdiv>
                    <DIV class=ms-acal-time>12:00 - 13:00</DIV>
                    <DIV class=ms-acal-title>
                        <A style= onclick="EditLink2(this,'WPQ3');return false;" href="/regions/NVAQ/Reservation-Ressources/Salles-ENORA/Lists/CalendrierSallesENORA/DispForm.aspx?ID=4">En cours</A>
                    </DIV>
                </DIV>
            </DIV>
    </DIV>
</DIV>

Voici ce que cela donne (avec le reste du code que je n'ai pas fournit)

Donc la div id = WebPartWPQ3 est un calendrier.

Les boites vertes à l'intérieur sont des événements (nous pouvons les retrouver dans le code si dessus)

Ce que je veux faire dans un premier temps c'est récupérer dans une liste tout les "ID" des événements affichées. Ces ID sont visible dans le lien de chaque événement, après le DispForm.aspx?ID=

Après coup j'analyserais quelle couleurs est censé avoir tel ID (ça je devrait y parvenir sans trop de problème)

Enfin je souhaiterait appliquer la couleur à l’événement contenant un ID spécifique seulement il faudrait pour cela sélectionner l'appliquer à la div qui contient le lien, le titre etc de l'événement  et pas seulement au lien.

Voila je pense avoir tout dit, est ce que cela est possible et si oui pourrait-on m'orienter vers des solutions s'il vous plait?

Je préfère prévenir d'avance que je suis débutant en javascript. Merci par avance de votre aide

-
Edité par Anonyme 14 février 2018 à 12:04:10

Regarde ce lien : https://jsfiddle.net/pueyf7mu/5/

J'ai juste fait un split de ton href pour récupérer l'ID si c'est true et qu'il y a bien un ID=?? alors tu applique ce que tu veux, sinon tu fait autre chose. 

Super merci beaucoup ! Cela me donne déjà les ID qui sont sur la page

Seulement une fois que j'aurais les couleurs de ces ID je ne vois pas comment appliquer le background-color a la division parent de celle qui à la classe "ms-acal-item style" et qui est associé avec le bonne ID. Ce qui serait une solution c'est qu'il faudrait trouver la couleur des ID et l'appliquer directement au lieu de lister les ID pour les analyser plus tard. Et comme ça une fois qu'on a trouver la bonne balise <a> on appliquer le style à son 4 ème parent, c'est possible??

@NicolasMaindroult : Je ne sais pas comment tu récupère ta data, si c'est en PHP, en Node ou autres langages back-end. 

J'ai update le Fiddle : https://jsfiddle.net/pueyf7mu/8/

Tu a accès grâce à la variable parent, à la classe que tu souhaite, mais il y a sans doute meilleur manière de faire. Maintenant à parent tu peut lui appliqué la couleur en fonction de ton ID. 

Merci beaucoup, j'ai tout compris, on peut donc retrouver le parent d'un élément grâce à la propriété ".parentNode" et donc retrouver le parent du parent et ainsi de suite !

J'utilise bien du javascript pour remplacer le rôle d'un langage back-end. Car je suis sur SharePoint et je ne peux pas modifier les pages comme je le voudrait donc j'utilise le javascript pour appliquer les bons styles aux éléments et ajouter des fonctionnalités.

Grace à toi je vais pouvoir faire beaucoup de chose, merci beaucoup @WebCaine

Sujet résolu !

-
Edité par Anonyme 21 février 2018 à 13:36:21