jQuery Girl
  1. jQuery Girl
  3. Sélection de frères et soeurs en vol stationnaire
Intereting Posts
Javascript – Changer la largeur de la bordure sans déplacer les éléments environnants. Affichage du message dans la boîte de fantaisie après le réglage de l’emplacement du bouton dans ajax Comment charger du contenu à partir de fichiers .php avec AJAX? jQuery.on “touchstart mousedown” – les deux événements sont déclenchés sur un périphérique à écran tactile Comment recharger une route en utilisant hasher.js et crossroads.js? Propriétés “inlineEdit: true” dans jqgrid? autocomplete avec ajax. plugin jQuery ou widget d’interface utilisateur jQuery? XMLHttpRequest ne peut pas charger le fichier. Les demandes d’origine croisée ne sont sockets en charge que pour HTTP. angular.js Javascript: mettre à jour le contenu de l’étiquette lors de la saisie à l’intérieur d’une entrée parent avec Jquery Est-ce une bonne pratique d’utiliser jQuery dans le projet Angular JS? extension de la largeur de la typeahead bootstrap pour correspondre au champ de saisie window.open bloqué par défaut (popups bloqué) Définir des cases à cocher sur la méthode d’édition dans Rails 4 La liste déroulante Bootstrap cesse de fonctionner après le changement de page – Rails 4.2 Comment faire défiler une iframe depuis jquery?

Sélection de frères et soeurs en vol stationnaire

J’ai un code qui va comme ça en HTML: 

   
 
  
 
Title
 
Text
 
Leer mas

J’aimerais y parvenir en survolant UL (avec calendrier des classes et commentaires), la couleur de la bordure pour div.entry_info et le fond de a.read_more sont modifiés via jQuery. C’est ce que j’ai cependant le second ne fonctionne pas. 

  $(document).ready(function(){ $('ul.calendar').hover ( function () { $(this).nextAll('.entry_info').addClass('hover_border'); $(this).nextAll('a.read_more').addClass('more_jquery'); $(this).next('ul.commentaries').addClass('bubble_hover'); }, function () { $(this).nextAll('div.entry_info').removeClass('hover_border'); $(this).nextAll('a.read_more').removeClass('read_more_jquery'); $(this).next('ul.commentaries').removeClass('bubble_hover'); }); });

Mon problème actuel est que tout fonctionne sauf la deuxième ligne.

C’est la ligne avec le problème: 

 $(this).nextAll('a.read_more').addClass('more_jquery');

Je suis assez nouveau sur jQuery et j’ai essayé des frères et soeurs et tout le rest, mais ça ne marchera pas. J’ai essayé avec eq (0) qui a fonctionné, mais comment puis-je le boucler? La raison pour laquelle je vais avec des classes et pas avec ID est parce que c’est une boîte qui se répète plusieurs fois.

Merci pour votre aide.

Pourquoi ne pas simplement utiliser CSS? 

 ul.calendar:hover ~ .entry_info { // selects all .entry_info's which are on the same level (siblings) as the ul.calender which is hovered over }

BTW, je suis sûr que la fonction $ magique de jQuery prend également en charge le combinateur général de frères et sœurs, donc $("item ~ sibling") devrait fonctionner parfaitement: 

 $("...").hover(function() { $("... ~ siblings"); }

Voir:

Cela ne fonctionne pas car nextAll obtient tous les frères et sœurs en fonction du sélecteur. Votre lien hypertexte n’est pas un frère. À la place, vous pouvez utiliser find pour rechercher le lien dans entry_info.

http://jsfiddle.net/U7hNS/ 

  
 
Leer mas
  
 

 $('ul.calendar').hover ( function () { $(this).nextAll('.entry_info').addClass('hover_border'); $(this).nextAll('.entry_info').find('a.read_more').addClass('more_jquery'); $(this).next('ul.commentaries').addClass('bubble_hover'); }, function () { $(this).nextAll('div.entry_info').removeClass('hover_border'); $(this).nextAll('.entry_info').find('a.read_more').removeClass('more_jquery'); $(this).next('ul.commentaries').removeClass('bubble_hover'); });