0
votes

Obtenir la div parent à partir de la div enfant

J'ai la structure ci-dessous

<div class="A">
    <div title="Sales"></div>
</div>

La classe A est courante et présente à de nombreux endroits sur la page, je ne peux donc pas sélectionner la div appropriée avec la classe A.

avoir un div enfant avec le titre "ventes" ou tout autre élément unique à chaque endroit, je peux obtenir ce div enfant avec le code ci-dessous div [title = 'Sales'] {background-color: skyblue; }

Maintenant, je veux sélectionner son div parent à partir du div enfant ci-dessus pour appliquer la couleur d'arrière-plan à tout le div parent Veuillez aider

javascript jquery html css

9 commentaires

"La classe A est courante et présente à de nombreux endroits sur la page, donc je ne suis pas en mesure de sélectionner le div approprié avec la classe A" Pourquoi pas? Utilisez simplement les éléments parents pour rendre le sélecteur plus spécifique: #container .foo: nth-child (2) .A par exemple. Nous avons besoin d'un exemple beaucoup plus clair de votre code HTML, y compris les parents, afin de vous aider le plus efficacement possible.

Vous voulez choisir le parent dans quelle langue. Javascript, jQuery, CSS ...? Comme il existe de nombreuses balises.

Faut-il cliquer sur la div vente et appliquer le style à A ?

J'utilise ceci dans SharePoint et j'ai ajouté un éditeur Modernscript sur la page afin que je puisse utiliser CSS, JQuery ou Javascript. Le CSS est préféré

Vouliez-vous dire cela? - $ ("div [title = 'Ventes']"). parents (". A"). addClass ('here_color_b‌ ackground');

@sergeykuznetsov, je veux appliquer une couleur d'arrière-plan à une balise entière A qui est associée à Sales, puis il y aura un autre A avec Products enfant div aura une couleur différente, Products est une classe similaire à Sales

voir mon exemple ci-dessus. Est-ce si nécessaire?

@sergeykuznetsov, Oui similaire à ceci $ ("div [title = 'Sales']"). parents (". A"). addClass ('here_color_b‌ ackground'); seulement je veux ajouter directement css au lieu d'addClass. S'il vous plaît laissez-moi savoir comment cela fonctionne et je suis nouveau dans ce domaine

@Vishal Tanawade, a donné la réponse ci-dessous.

3 Réponses :

3
votes

Pourquoi vous ne résolvez pas cela comme mon extrait de code. Nous les résolvons probablement avec css et non js. vous utilisez parent dans votre js, ce qui rend vos codes plus nombreux et même il n'y a pas de logique pour faire cela pourquoi nous réfléchissons sérieusement?!

<div class="A Sales">
    <div title="Sales"></div>
</div>

<div class="A Products">
    <div title="Sales"></div>
</div>

0 commentaires

1
votes

En CSS, vous ne pouvez pas accéder à la div parent étant donné un élément enfant spécifique, mais vous pouvez simuler ce comportement en ajoutant un box-shadow à l'élément enfant, par exemple

<div class="A">
    <div title="Sales">Sales</div>
</div>

.A {
  border: 1px lightblue dashed;
  padding: 100px;
  overflow: hidden;
}

[title="Sales"] {
  border: 1px yellowgreen dashed;
  box-shadow: 0 0 0 100vmax skyblue; /* or a higher value */
}

Le débordement caché appliqué au parent coupera la zone de l'ombre.

1 commentaires

Cela fonctionne pour moi, y a-t-il un moyen de réduire la taille de mon div parent.

1
votes

Comme il y a de nombreuses balises dans votre question:

Jquery:

$("div[title='Sales' ").parent()

ou, mieux, avec un filtre sur quel parent:

$("div[title='Sales' ").parents(".A")

dans la vanille JS:

document.querySelectorAll("div[title='Sales' ").parentNode

document.querySelectorAll("div[title='Sales' ").parentElement

Avec CSS, il n'est actuellement pas possible de sélectionner un élément en fonction des propriétés enfants, mais il existe d'autres moyens d'implémenter ce comportement.

0 commentaires