Comment changer le style div parent si le contenu augmente?

Je suis confronté à un petit problème. Je veux changer le style div parent lorsque le contenu de la div augmente ses caractères.Comment changer le style div parent si le contenu augmente?

<div class="welcome-message"><a href="#">Some link</a></div>

Ceci est le format du html. disons que le texte du lien a un min char de 80 caractères, si c'est plus de 80 alors le style de la div parente devrait être changé, ie. largeur: 200px;

solution jQuery préférée, JS aussi bien.

grâce

Source

2009-09-25 Wasim Shaikh

Vous pouvez le faire comme ceci:

$(document).ready(function() 
{ 
    if ($('.welcome-message a:first').text().length > 80) 
     $('.welcome-message').css({'width': 200}); 
});

Source

2009-09-25 11:32:51 Greg

déclenché une seule fois, je ne sais pas si c'est le comportement qu'il est – vvo

excepté cette solution vraiment sympa juste ajouter «largeur» : 200 + 'px' reste est très bien .. merci Greg –

Hmm jQuery devrait ajouter automatiquement le "px" pour vous – Greg

Il n'y a pas javascript événement comme "le fait inscrease de contenu?" style dynamique, tout ce que vous pouvez faire est de demander en javascript "a augmenté le contenu" toutes les ms.

Mais je pense que votre problème est beaucoup plus css un ...

Source

2009-09-25 11:31:14 vvo

ne pouvons pas trouver la longueur de caractères en utilisant jQuery, et d'autres si la condition –

Oui mais toutes les solutions sont ici sur le document prêt, si le contenu du lien change alors vous ne le saurez pas parce qu'il y a pas d'événements js qui dit "contenu mis à jour" ... – vvo

merci Vincent, c'est en fait un nom d'utilisateur. nom d'utilisateur de bienvenue. donc son document prêt. et c'est pas changé par ms. merci de répondre Vin, –

$(document).ready(function(){ 
    var l=$("div.welcome-message").text().length; 
    var w=50; 

    if(l>80){ 
     w=200; 
    }else if(l>40){ 
     w=100px 
    } 
    $("div.welcome-message").css({'width':w+'px'}); 
});

Source

2009-09-25 11:34:19 TheVillageIdiot

Eh bien, supposant que vous avez une classe distincte qui définit la nouvelle, plus grande largeur:

function checkLength() 
{ 
    if ($('div.welcome-message a').text().length > 80) 
    { 
     $('div.welcome-message').addClass('myLargeWidthClass'); 
    } 
    else 
    { 
     $('div.welcome-message').removeClass(); 
    } 
}

Vous appelleriez alors cette fonction en charge. Par exemple.

$(function(){ 
    checkLength(); 
});

Source

2009-09-25 11:35:59

Je sais que cela ne répond pas à votre question parce que votre div ne changera le chargement de la page initiale, mais après avoir lu les réponses à cette question que je voulais ajouter cette solution pour être complet car il y a un événement qui déclenche quand il n'y a aucune modification à l'élément dans le DOM (sauf pour IE) ... J'ai trouvé la solution here on SO.

En résumé, cela fonctionne pour redimensionner la <div> en fonction de son contenu dynamique (notez le « DOMSubtreeModified »)

$(".welcome-message a").bind("DOMSubtreeModified",function(){ 
    var w = ($(this).html().length > 80) ? 200 : 100; 
    $(this).parent().css("width", w); 
})

J'ai aussi ajouté un échantillon du code dans l'action à this pastebin.

Source

2009-09-26 02:13:33 Mottie

merci pour la solution. et pastebin –

Comment changer le style div parent si le contenu augmente?

Répondre

Questions connexes