2
votes

Trouver la balise d'image à l'intérieur de p avec une classe spécifique en utilisant jquery

J'ai plusieurs éléments

sur ma page. Les données de cet élément proviennent de la base de données.

voici mon code. Premier type d'élément

<script>
    $( "p" ).find( "img" ).addClass('center-block');
</script>

Second type d'élément

avec style code> attribut (ce style provient également de la base de données)

<p style="text-align: center;">
       <img class="img img-responsive" src="image_url" alt="" width="235" height="41">
</p>

Maintenant, je veux ajouter class center-block à image, dont la balise

a un attribut de style comme celui-ci.

javascript jquery html css

3 commentaires

utilisez chacun et vérifiez le style.

Votre titre est un peu trompeur, car vous essayez de trouver un p avec un attribut spécifique qui n'est pas du tout une classe.

Copie possible de Comment sélectionnez-vous des éléments en fonction de leur style? < / a>

6 Réponses :

3
votes

Récupérez uniquement les paragraphes avec ce style dans les attributs (commençant par text-align)

[].forEach.call(document.querySelectorAll("p[style^='text-align'] img"), function(el) {
    el.classList.add('center-block');
})

dans VanillaJS :

$( "p[style^='text-align'] img" ).addClass('center-block');

Démo

1 commentaires

Merci d'avoir montré vanilla JS aussi. Saviez-vous que querySelectorAll prend en charge forEach de manière native. Vous pouvez donc faire ceci: document.querySelectorAll ("p [style ^ = 'text-align'] img"). ForEach (function (el) {el.classList.add ('center-block');} )

1
votes

Vous pouvez utiliser le sélecteur d'attribut css:

'p[style*="text-align: center"] img, p[style*="text-align:center"] img'

cela ne fonctionnera que si le style entier est comme celui-ci, si vous avez d'autres styles, vous pouvez utiliser ce sélecteur

'p[style*="text-align: center"] img'

et si vous ne savez pas si vous avez de l'espace, vous pouvez utiliser deux sélecteurs d'attributs:

 $('p[style="text-align: center"] img').addClass('center-block');

vous pouvez également écrire un pseudo-sélecteur personnalisé ( en JavaScript) comme : style (text-align: center) c'est plus complexe et je pense que ce n'est pas nécessaire pour votre cas.

Et une note latérale comme vous pouvez le voir dans mon code il n'y a pas de recherche puisque vous n'en avez pas besoin, vous pouvez avoir un seul sélecteur.

0 commentaires

0
votes

$("p").each(function(){
  if($(this).css('text-align') == "center") {
    $(this).find('img').addClass('center-block');
  }
});
This will check every p element and for ones where the styling contains text-align: center it'll set its child image(s) to include the center-block class

3 commentaires

cela sélectionnera le p si text-align est défini dans la feuille de style, je ne sais pas si cela compte.

Je pense que .css peut être utilisé pour obtenir n'importe quel style calculé, que son origine provienne d'une feuille de style ou en ligne

Oui mais vous ne pouvez pas distinguer les deux, ils fonctionnent de la même manière. Vous pouvez donc sélectionner des p qui n'ont pas du tout d'attribut de style.

0
votes

Vous devez utiliser la fonction de filtrage

$( "li" )
  .filter(function( index ) {
    return $( this ).attr( "style" ) === "text-align: center";
  })
    .addClass('center-block');

0 commentaires

0
votes

Sélectionnez simplement la vérification de la propriété css text-align pour qu'elle corresponde à celle que vous avez donnée, voici un extrait de code fonctionnel:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><img class="img img-responsive" src="https://www.catster.com/wp-content/uploads/2017/08/A-fluffy-cat-looking-funny-surprised-or-concerned.jpg" alt="" width="235" height="41"></p>
<p style="text-align: center;">

<img class="img img-responsive" src="https://www.catster.com/wp-content/uploads/2017/08/A-fluffy-cat-looking-funny-surprised-or-concerned.jpg" alt="" width="235" height="41">
</p>

$( document ).ready(function() {
    $( "p[style='text-align: center;']" ).find( "img" ).addClass('center-block');
});

0 commentaires

0
votes

Je pense qu'il suffit de trouver tous les p avec l'attribut de style

<script>
    $( "p[style] img" ).addClass('center-block');
</script>

0 commentaires