Maison > Article > interface Web > Comment sélectionner tous les liens dans un paragraphe en utilisant jQuery ?
Comment sélectionner tous les liens dans un paragraphe en utilisant jQuery ?
- WBOYavant
- 2023-09-14 21:45:03945parcourir
jQuery est une bibliothèque JavaScript populaire qui simplifie la traversée HTML DOM, la gestion des événements et l'interaction AJAX pour un développement Web rapide. Il fournit un large éventail de fonctions et de méthodes intégrées pour aider les développeurs à manipuler dynamiquement les éléments, les styles et les comportements HTML.
Dans cet article, nous apprendrons comment sélectionner tous les liens dans un paragraphe à l'aide de jQuery. La sélection de liens dans un paragraphe est une exigence courante lorsque nous souhaitons modifier des liens vers une partie spécifique du site Web (par exemple changer de style, rechercher des liens, etc.).
Comment sélectionner tous les liens dans un paragraphe ?
La sélection de liens dans un paragraphe est une tâche courante, il existe donc de nombreuses façons de sélectionner tous les liens dans un paragraphe dans jQuery. Examinons différentes manières de sélectionner des liens et voyons comment jQuery peut accomplir cette tâche efficacement et écrire un code plus efficace et plus maintenable.
Méthode 1 : utilisez la méthode .children()
La méthode.filter() est une méthode fournie par jQuery qui permet aux utilisateurs de renvoyer tous les éléments enfants directs de l'élément sélectionné. Pour sélectionner des liens dans un paragraphe contenant des balises d'ancrage avec le nom de balise spécifié, nous pouvons utiliser la méthode Children. Vous trouverez ci-dessous la syntaxe pour atteindre le même objectif.
Grammaire
$("p").children("a").each(function() {
// add your styles
});
La syntaxe donnée ci-dessus sélectionne d'abord tous les éléments de paragraphe à l'aide de la fonction « $ ». Après cela, il appelle la méthode Children() sur chaque élément de paragraphe pour récupérer toutes les balises d'ancrage qui sont ses descendants. Enfin, la méthode each() est utilisée pour parcourir chaque lien et sélectionner uniquement les ancres, c'est-à-dire les balises pour ajouter ou modifier des styles, ou effectuer toute autre action.
Exemple
Dans cet exemple, nous avons défini un bouton "btn1" qui utilise la méthode .children() pour sélectionner toutes les balises d'ancrage qui sont des enfants directs d'un paragraphe. Lorsque vous cliquez sur le bouton, le code jquery est exécuté et renvoie tous les éléments enfants directs de l'élément sélectionné, c'est-à-dire qu'il renvoie le texte vert "Tutorialspoint" du paragraphe de notre exemple.
<html>
<head>
<title>Select Links Inside Paragraph Using jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("#btn2").click(function(){
$("span").children("a").each(function(){
$(this).css("color", "violet");
});
});
});
</script>
<style>
.find-link-class {
color: black;
font-weight: bold;
}
</style>
</head>
<body>
<p>
Welcome to <span><a href="https://www.php.cn/link/d36cad380b069785900bcfd258bdecea">Tutorialspoint</a></span>. A leading Ed Tech company striving to provide the best
learning material on technical and non-technical subjects.
</p>
<button id="btn2">Violet Link</button>
</body>
</html>
Méthode 2 : utilisez la méthode .filter()
La méthode.filter() est une méthode fournie par jQuery qui permet aux utilisateurs de filtrer les éléments sélectionnés en fonction de conditions spécifiques. Afin de sélectionner des liens dans un paragraphe contenant des balises d'ancrage, puis de récupérer ces balises, nous devons définir le nom de la balise dans la méthode filter(). Vous trouverez ci-dessous la syntaxe pour atteindre le même objectif.
Grammaire
$("p").find("*").filter("a").each(function(){
// add your styles
});
La syntaxe donnée ci-dessus sélectionne d'abord tous les éléments de paragraphe à l'aide de la fonction « $ ». Ensuite, il appelle la méthode find() sur chaque élément de paragraphe pour récupérer toutes les balises d'ancrage qui sont ses descendants. Enfin, la méthode filter() est utilisée pour parcourir chaque lien à l'aide de la méthode each() et sélectionner uniquement les ancres, c'est-à-dire les balises utilisées pour ajouter ou modifier des styles ou effectuer toute autre opération.
Exemple
Dans cet exemple, nous définissons un bouton "btn2" qui utilise la méthode .filter() pour sélectionner toutes les balises d'ancrage qui sont des enfants directs d'un paragraphe. Lorsque l'on clique sur le bouton, le code jquery est exécuté qui renvoie tous les liens, c'est à dire qu'il renvoie le texte violet "Tutorialspoint" du paragraphe de notre exemple.
<html>
<head>
<title>Select Links Inside Paragraph Using jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").find("a").each(function(){
$(this).css("color", "green");
});
});
});
</script>
<style>
.find-link-class {
color: black;
font-weight: bold;
}
</style>
</head>
<body>
<p>
Welcome to <span><a href="https://www.php.cn/link/d36cad380b069785900bcfd258bdecea">Tutorialspoint</a></span>. A leading Ed Tech company striving to provide the best
learning material on technical and non-technical subjects.
</p>
<button id="btn1">Green Link</button>
</body>
</html>
Méthode 3 : utilisez la méthode .has()
La méthode.has() est une méthode fournie par jQuery qui permet aux utilisateurs de sélectionner des éléments qui ont un certain élément descendant. Afin de sélectionner des liens dans un paragraphe contenant des balises d'ancrage, puis de récupérer ces balises, nous pouvons utiliser cette méthode. Vous trouverez ci-dessous la syntaxe pour atteindre le même objectif.
Grammaire
$("p:has(a)").find("a").each(function(){
// add your styles
});
La syntaxe donnée ci-dessus sélectionne d'abord tous les paragraphes contenant des balises d'ancrage à l'aide du sélecteur :has(). Ensuite, il appelle la méthode find() sur chaque élément de paragraphe pour récupérer toutes les balises d'ancrage qui sont ses descendants. Enfin, la méthode each() est utilisée pour parcourir chaque lien pour ajouter ou modifier des styles, ou effectuer toute autre opération.
Exemple
Dans cet exemple, nous définissons un bouton "btn3" en utilisant la méthode .has(). Lorsque vous cliquez sur le bouton, le code jQuery est exécuté et la fonction sélectionne toutes les balises d'ancrage qui ont un élément descendant spécifique. Autrement dit, il renvoie le texte rouge « Tutorialspoint » du paragraphe de notre exemple.
<html>
<head>
<title>Select Links Inside Paragraph Using jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("#btn3").click(function(){
$("p:has(a)").find("a").each(function(){
$(this).css("color", "red");
});
});
});
</script>
<style>
.find-link-class {
color: black;
font-weight: bold;
}
</style>
</head>
<body>
<p>
Welcome to <span><a href="https://www.php.cn/link/d36cad380b069785900bcfd258bdecea">Tutorialspoint</a></span>. A leading Ed Tech company striving to provide the best
learning material on technical and non-technical subjects.
</p>
<button id="btn3">Red Link</button>
</body>
</html>
Conclusion
La sélection de liens dans les paragraphes est une tâche très simple car elle permet de modifier les liens pour des parties spécifiques de l'application Web. Nous avons discuté de différentes manières de sélectionner tous les liens dans un paragraphe à l'aide de jQuery. Comme indiqué, nous avons appris trois méthodes différentes, à savoir l'utilisation de la méthode .children(), la méthode .filter() et la méthode .has(), car toutes ces méthodes sont efficaces et faciles à utiliser. Dans l'ensemble, jQuery est un outil puissant qui simplifie la traversée HTML DOM, la gestion des événements et les interactions AJAX pour un développement Web rapide.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript