Percorer elementos

[pinoc 2]

Bom dia.

 

Acredito que a minha duvida seja bem simples para quem entende de jquery que não é nem um pouco meu caso.

É o seguinte, estou montando um site que tem varias tags h3 como titulo de blocos porem ao lado dela tem um risco que deve se adpatar ao tamanho que sobro com relação ao titulo, estou fazendo o risco ficar to tamanho coreto da seguinte forma.

<script type="text/javascript">
        jQuery(window).on('load',  function() {
            var less = (jQuery(".title").width() - 10 - jQuery(".title>h3").width());
            jQuery(".riskTitle").css("width", less);

        });
    </script>

Esta funcionando certinho, o problema é que a função para adpatar o risco ao lado do titulo pega apenas a primeira tag e seta o valor para todas sendo que o titulo ta vindo dinamicamente e não é do mesmo tamanho sempre.

 

Tem como eu fazer o jquery setar um valor para cada tag diferente sendo que não altere a anterior já setada?

 

Obrigado desde já.

Aguardo.

 

[William Bruno 1501]

Não cara, não faz isso com js não.

 

tenta fazer apenas com css.

[pinoc 2]

Opa Willian Bruno.

 

Ja tentei de tudo que é jeito com css, mas sem resultado.

O problema com o css é que não consigo fazer o risco ficar com o tamanho coreto ao lado o titulo.

Se coloco width fixo ele não se adpata a todos os titulos, se não coloco width ele fica em todo o campo.

[William Bruno 1501]

Poste uma imagem de como vc quer q fique

[kikombat 16]

se você precisa executar o script para cada título então use o "each".

da forma como esta o calculo é feito uma única vez e propagado para todas as tags com uma class riskTitle

mostre como esta o html do trecho para poder ajudar melhor.

  $(this).each(function() {
//script aqui
});

[pinoc 2]

Bom dia.

 

Desculpa a demora Willian, segue as imagens.

 

Esta ficando assim com css

 

 

Deve ficar assim

 

 

Já tentei de tudo para fazer isso se aptar sem setar um width padrão, pois não sei qual sera o tamanho do titulo.

 

Obrigado desde já.

[pinoc 2]

Consegui resolver oque queria apenas com css.

Utilizei a propriedade flex que acabei de conhecer.

 

HTML

<div class="title">
       <h3>Show de aprovações 2014</h3>
       <div class="riskTitle"></div>                         
</div><!-- /.title -->

CSS

.title {
    display: -webkit-flex;
    display: flex;
}

/* Titulo dos modulos */
.title > h3 {
    font-size: 16px;
    font-family: Arial;
    color: #282727;
    font-weight: bold;
    float: left !important;
    margin: 0px 0 10px;
    padding: 0px;
}

/* Risco no titulo dos modulos */
.title > .riskTitle {
    background: url("../images/site/riskTitle.png") bottom left no-repeat;
    height: 14px !important;
    -webkit-flex: 1;
    flex: 1;
}

Obrigado quem tento me ajudar, e caso não seje a forma certa de se fazer isso por favor me de uma dica.