-1
votes

Changer la couleur de la bordure si TR hasClass

J'essaie de changer la couleur de la bordure du 1er à l'intérieur d'une table / si le 2e est compléter en ayant la classe de .wcpv-order-ordre-terminé

sur une page avec un couple de Comment ne peut cibler que celles qui ont État-statut-terminé?

Essayé avec jQuery et PHP if-instruction xxx

chacun est configuré comme ceci. La 2e TD changera soit en cours d'exécution de l'état de la commande WCPV ou de traitement: xxx

J'essaie d'avoir la frontière sur le 1er qui a le sélecteur: .vendor td.order_id a

Cependant, le sélecteur ci-dessus affectera tous les S

Je m'attends à ce que l'état de la commande est terminé.


                        
                        
                            
                                                                    jquery
                                                                    css
                                                            
                        
                                                    
                            
                            
                                13 commentaires
                                
                                                                            Si le    que vous sélectionnez sera celui avec la classe, vous pouvez simplement utiliser  $ ("TR.WCPV-COMMAND-STATUT-EST-EST COMPLET-EST COMPLÈTE")  , c'est-à-dire  "Sélectionnez tout    comportant la classe  wcpv-order-statut-terminé " . Encore une fois, si vous recherchez  a    que  contient un élément  avec la classe  wcpv-ordre-statut-terminé  , ce serait un cas pour : a () .

                                        
                                                                            En supposant que le  tr  a une classe de  .wpcv ...   $ ("TR.WCPV-Order-Statut-Etat-Terminé)"). CSS ("Border" , "1px solide vert"); 

                                        
                                                                            Après avoir modifié votre question, je vois que les balises HTML que vous avez incluses avaient été perdues à l'origine (analysées). Il semble que vous souhaitiez que la bordure    modifie s'il contient un    avec une classe spécifique. Étant donné que la réalisation, cette  serait  un cas pour : a () , bien que votre code a l'air bien. Veuillez fournir un   exemple minimal, reproductible   de la question (c.-à-d. Ajouter votre HTML) . Voyez-vous le style appliqué à votre    si vous l'inspectez?

                                        
                                                                            Avez-vous  Border-Collapse: Collapse  appliqué à la table? Les frontières de la rangée de table ne montreront pas le contraire.

                                        
                                                                            Pourquoi n'utilisez-vous pas de style CSS Class pour cela? Pourquoi utilisez-vous JavaScript? Si vous faites comme ça, vous risquez de manquer des éléments si vous exécutez ce code pour tôt
                                        
                                                                            @Fetz CSS n'a pas de  prises en charge: a ()  Sélecteur équivalent. Vous ne pouvez pas styler un élément parent assis sous ses enfants.

                                        
                                                                             API.JQUERY.com/hasclass   hasClass 

                                        
                                                                            @demo qui ne semble pas applicable ici car il vous oblige à cibler un élément  spécifique , par opposition à  "Vérifier la présence de la classe  x  n'importe où dans l'élément  y  "

                                        
                                                                            Mais n'a que vérifiez que si TR a cette classe, et il s'applique à TR. Et à la manière de régler la taille de la bordure au moins 1px
                                        
                                                                            La ligne que vous avez incluse dans votre question contient des erreurs de syntaxe. Vous avez un  href (code> et     dans la balise  produit .

                                        
                                                                            @Fetz  "a seulement vérifié si TR a cette classe"  - ceci est incorrect. Voir  : a ()  :  "sélectionne des éléments qui  contient  au moins un élément qui correspond au sélecteur spécifié. L'expression  $ ("div: a (p)")  correspond à un  
  Si un    existe n'importe où parmi ses descendants "
                                        
                                                                            Op, s'il vous plaît   voir ici  . J'ai copié + collé votre code, et cela ne reproduit pas le problème. Comme mentionné ci-dessus, assurez-vous d'avoir  Table {Border-Collapse: Collapse}  appliqué, sinon votre    ne montrera jamais une bordure. Votre question doit inclure suffisamment de code pour reproduire la question que vous décrivez. Aussi, vous avez édité et ajouté cette ligne:  "J'essaie d'avoir la frontière sur le 1er    qui a le sélecteur:  .vendor td.order_id a  " Mais cela semble être une question complètement différente ...? Ce n'est pas très clair.

                                        
                                                                            @Tyler Roper merci! Désolé de ne pas être suffisamment clair ... Je veux changer la frontière du 1er TD si le 2e TD est terminé. Dans votre exemple, la frontière autour de l'ensemble tront le sélecteur, je suppose que je suppose que je suis censé cibler est .vendor td.order_id a - cependant, c'est global et affectera tous les  et non seulement ceux qui sont terminés en tant que J'essaie de faire.

4 Réponses : 0 votes J'ai créé une page avec TR Tags lorsque certaines secondes tags TD ont la classe que vous avez mentionnée alors que d'autres ne le font pas. À la fin, il y a un bouton qui rend la validation de laquelle les étiquettes ont la classe. p> <!DOCTYPE html> <html> <head> <meta charset = "UTF-8" /> <title>Teste</title> <style> td { width: 100px; text-align: center; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> <table> <tr> <td>1st TD</td> <td class = "wcpv-order-status-completed">2nd TD</td> </tr> <tr> <td>1st TD</td> <td>2nd TD</td> </tr> <tr> <td>1st TD</td> <td>2nd TD</td> </tr> <tr> <td>1st TD</td> <td class = "wcpv-order-status-completed">2nd TD</td> </tr> <tr> <td>1st TD</td> <td class = "wcpv-order-status-completed">2nd TD</td> </tr> </table> <button>Test</button> <script type = "text/javascript"> $(document).ready(function() { $("button").click(function() { $("tr").each(function() { if ($(this).find("td").eq(1).hasClass("wcpv-order-status-completed")) { $(this).find("td").eq(0).css("border", "1px solid green"); } }); }); }); </script> </body> </html> 3 commentaires Apparemment, vous avez édité votre question pendant que je créais la réponse. J'espère que ma réponse aide en quelque sorte. Et n'oubliez pas que vous devez définir une largeur de frontière comme au moins 1px :) ^ Ce n'est en fait pas tout à fait nécessaire :) 0 votes 1st code> à l'intérieur d'un p> p> Sélectionnez le premier TD CODE> INTÉRIEUR TR CODE>: P> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td>Row 1 Cell 1</td> <td>Row 1 Cell 2</td> </tr> <tr> <td>Row 1 Cell 1</td> <td class="wcpv-order-status-completed">Row 1 Cell 2</td> </tr> </table> 2 commentaires Je suis curieux de savoir pourquoi le chèque est dans un Settimeout () ? Mais aussi, j'ai l'impression que l'utilisation de chaque pour trouver des éléments par index est un peu surchargée. : a () à part, vous pouvez simplement utiliser des sélecteurs comme Nth-enfant () , td: premier , etc. @TyLerroper, la question n'est pas claire si c'est le premier TD dans chaque ligne ou le premier TD de n'importe quelle ligne. 1 votes Vous pouvez modifier légèrement votre : a () code> sélecteur: xxx pré> Ceci trouvera un code> qui a un .WCPV-Order-Statut-Terminé Code>. Dans ce code>, donnez le ordre_id code> liez une bordure verte. P> qui dit, pour une efficacité maximale, rompez-la en morceaux. P > <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <th scope="row" class="check-column"><input type="checkbox" name="ids[6]" value="5"></th> <td class="order_id column-order_id has-row-actions column-primary" data-colname="Booking"><a href="https://example.com/wp-admin/12" class="wcpv-vendor-order-by-id">1528</a><button type="button" class="toggle-row"><span class="screen-reader-text">Vis for flere detaljer</span></button></td> <td class="order_status column-order_status" data-colname="Booking status"><span class="wcpv-order-status-completed">COMPLETED</span></td> <td class="order_date column-order_date" data-colname="Booking dato">June 5, 2019 9:19 am</td> <td class="shipping_address column-shipping_address" data-colname="Shipping"></td> <td class="product_name column-product_name" data-colname="Product"> <a class="post-edit-link" href="https://example.com/admin/123"></a> </td> <td class="total_commission_amount column-total_commission_amount" data-colname="Commission"><span class="woocommerce-Price-amount amount">350 <span class="woocommerce-Price-currencySymbol">DKK</span></span> </td> <td class="commission_status column-commission_status" data-colname="Kommission Status"><span class="wcpv-unpaid-status">UBETALT</span></td> <td class="paid_date column-paid_date" data-colname="Paid Date">0000-00-00 00:00:00</td> <td class="fulfillment_status column-fulfillment_status" data-colname="UdfÃ¸rselsstatus"><span class="wcpv-fulfilled-status">Opfyldt</span></td> </tr> <tr> <th scope="row" class="check-column"><input type="checkbox" name="ids[6]" value="5"></th> <td class="order_id column-order_id has-row-actions column-primary" data-colname="Booking"><a href="https://example.com/wp-admin/12" class="wcpv-vendor-order-by-id">1528</a><button type="button" class="toggle-row"><span class="screen-reader-text">Vis for flere detaljer</span></button></td> <td class="order_status column-order_status" data-colname="Booking status"><span class="">NOT COMPLETED</span></td> <td class="order_date column-order_date" data-colname="Booking dato">June 5, 2019 9:19 am</td> <td class="shipping_address column-shipping_address" data-colname="Shipping"></td> <td class="product_name column-product_name" data-colname="Product"> <a class="post-edit-link" href="https://example.com/admin/123"></a> </td> <td class="total_commission_amount column-total_commission_amount" data-colname="Commission"><span class="woocommerce-Price-amount amount">350 <span class="woocommerce-Price-currencySymbol">DKK</span></span> </td> <td class="commission_status column-commission_status" data-colname="Kommission Status"><span class="wcpv-unpaid-status">UBETALT</span></td> <td class="paid_date column-paid_date" data-colname="Paid Date">0000-00-00 00:00:00</td> <td class="fulfillment_status column-fulfillment_status" data-colname="UdfÃ¸rselsstatus"><span class="wcpv-fulfilled-status">Opfyldt</span></td> </tr> </table> 0 commentaires 0 votes Vous devez modifier la couleur de la bordure du premier d'un qui a autre éléments avec une classe spécifique. xxx 0 commentaires

Articles qui pourrait vous intéresser : Select2 ne s'affiche pas correctement dans le mode bootstrap datetimepicker ne fonctionne pas avec bootstrap 4? L'appel Ajax n'affiche pas de réponse en cas de succès django admin - Comment ajouter du javascript à la fin d'un fichier