Comment puis-je utiliser le bootstrap liste pour afficher le contenu d'un frère ou un enfant de l'élément?

Je suis en train d'essayer d'obtenir le bootstrap liste pour afficher le contenu contextuel basé sur ce que l'élément est en cours d'installation avec liste.

Voici un exemple de syntaxe:

<div class="user">
    <img src="foo.jpg" />
</div>
<div class="userInfo">
    <p>He likes pie!</p>
</div>

<div class="user">
    <img src="bar.jpg" />
</div>
<div class="userInfo">
    <p>He likes cake!</p>
</div>

Le script de configuration de la liste:

$('.user').popover({
    trigger: 'hover',
    placement: 'top',
    html: true,
    content: //What goes here?  I want to display the contents of the userInfo class
});

Le résultat attendu quand j'ai passez la souris sur la user classe serait d'afficher une liste affichant le contenu de la fratrie ou enfant userInfo classe.

Balisage peut être flexible, je peux déplacer le userInfo classe d'être un enfant, frère, sœur, parent, etc.

OriginalL'auteur Justin Helgerson | 2013-01-10

  1. 11

    Ouais je mettrais le .userInfo à l'intérieur de .user, puis itérer sur $('.user') et de définir le contenu de chaque .user séparément (dans votre exemple, vous définissez le même contenu pour tous les popovers.

    Exemple: 

    <div class="user">
  user 1
  <div class="userInfo">
    <p>He likes pie!</p>
  </div>
</div>

<div class="user">
  user 2
  <div class="userInfo">
    <p>He likes cake!</p>
  </div>
</div>

    Javascript: 

    $('.user').each(function() {
  var $this = $(this);
  $this.popover({
    trigger: 'hover',
    placement: 'right',
    html: true,
    content: $this.find('.userInfo').html()  
  });
});

    Ici est un travail jsfiddle (ajouté un peu plus de css):
    http://jsfiddle.net/hajpoj/CTyyk/5/

    Merci! Je ne sais pas pourquoi je n'ai pas pensé à appeler .each()... qui le rend facile comme bonjour!

    OriginalL'auteur hajpoj

  2. 0

    Vous pourrait quitter son origine de balisage et d'utiliser ceci:

    $('.user').each(function() {
  var $this = $(this);
  $this.popover({
    trigger: 'hover',
    placement: 'right',
    html: true,
    content: $this.next().html()  
  });
});

    OriginalL'auteur Cam