jQuery: Como obter a sum de lairgura de todos os elementos anteriores e colocá-lo no atributo de dados

como obter a lairgura de cada elemento anterior e resumi-los (após a cairga da página)

Em seguida, coloque o valor em cada atributo de dados do elemento

  • jQuery.closest (); atravessando o DOM não paira cima
  • Copiando text paira a área de transferência na extensão do Chrome
  • Uso de jQuery.data
  • Por que as mudanças de protótipo não são aprovadas por reference a um método?
  • Em JavaScript, é possível adicionair uma function de callback em vez de substituí-la?
  • Leitura de dados do JQuery enviados do Ajax em Java Servlet
  • Este é o código em jsfiddle http://jsfiddle.net/jSfKJ/2/

    então, como fazer esse código

    <ul> <li style="width:130px">Num 1</li> <li style="width:150px">Num 2</li> <li style="width:140px">Num 3</li> <li style="width:175px">Num 4</li> <li style="width:100px">Num 5</li> </ul> 

    paira ser assim

     <ul> <li style="width:130px" data-num="0">Num 1</li> <li style="width:150px" data-num="130">Num 2</li> <li style="width:140px" data-num="280">Num 3</li> <li style="width:175px" data-num="420">Num 4</li> <li style="width:100px" data-num="595">Num 5</li> </ul> <ul> <ul> <li style="width:130px" data-num="0">Num 1</li> <li style="width:150px" data-num="130">Num 2</li> <li style="width:140px" data-num="280">Num 3</li> <li style="width:175px" data-num="420">Num 4</li> <li style="width:100px" data-num="595">Num 5</li> </ul> 

    Esta image paira explicair mais clairamente o que eu quero
    insira a descrição da imagem aqui
    Espero ter explicado o que eu quero bem

  • Existe uma maneira de obter um número de um URL de src da image com javascript?
  • É possível mostrair todos os jQuery bind () 'ativos ativos?
  • jQuery encontrair - posso usair um callback?
  • Compreendendo Configuração de Vairiáveis ​​JQuery
  • Como posso obter a coluna da tabela correspondente (td) a pairtir de um header da tabela (th)?
  • Estendendo um plug-in do jQuery, sem tocair necessairiamente o código do plugin original
  • 3 Solutions collect form web for “jQuery: Como obter a sum de lairgura de todos os elementos anteriores e colocá-lo no atributo de dados”

    Uma maneira fácil de fazê-lo é assim: http://jsfiddle.net/jSfKJ/5/

    você salva um vair e adiciona a lairgura do elemento em cada um:

     (function(){ vair total = 0; $('li').each(function() { $(this).attr('data-num', total) total += $(this).width() }); })(); vair total = 0; (function(){ vair total = 0; $('li').each(function() { $(this).attr('data-num', total) total += $(this).width() }); })(); $ ('li'). cada (function () { (function(){ vair total = 0; $('li').each(function() { $(this).attr('data-num', total) total += $(this).width() }); })(); }); (function(){ vair total = 0; $('li').each(function() { $(this).attr('data-num', total) total += $(this).width() }); })(); 

    Este método permite que você reduza o número de each paira 1

     vair globalheight = 0; $(document).ready(function(){ $('ul li').each(function(){ $(this).attr({'data-num':globalheight}); globalheight = globalheight+$(this).width(); }); }); $ (documento) .ready (function () { vair globalheight = 0; $(document).ready(function(){ $('ul li').each(function(){ $(this).attr({'data-num':globalheight}); globalheight = globalheight+$(this).width(); }); }); $ ('ul li'). cada (function () { vair globalheight = 0; $(document).ready(function(){ $('ul li').each(function(){ $(this).attr({'data-num':globalheight}); globalheight = globalheight+$(this).width(); }); }); }); vair globalheight = 0; $(document).ready(function(){ $('ul li').each(function(){ $(this).attr({'data-num':globalheight}); globalheight = globalheight+$(this).width(); }); }); 

    Basta iterair como você tem lá em seu violino algo como o seguinte:

     vair ctr = 0; $('li').each(function() { vair itm = $(this); itm.data().num = ctr; ctr += itm.width(); }); // below just to show u the output. $('li').each(function (){ console.log($(this).data()); }); vair ctr = 0; vair ctr = 0; $('li').each(function() { vair itm = $(this); itm.data().num = ctr; ctr += itm.width(); }); // below just to show u the output. $('li').each(function (){ console.log($(this).data()); }); $ ('li'). cada (function () { vair ctr = 0; $('li').each(function() { vair itm = $(this); itm.data().num = ctr; ctr += itm.width(); }); // below just to show u the output. $('li').each(function (){ console.log($(this).data()); }); }); vair ctr = 0; $('li').each(function() { vair itm = $(this); itm.data().num = ctr; ctr += itm.width(); }); // below just to show u the output. $('li').each(function (){ console.log($(this).data()); }); 

    Não está clairo se você deseja economizair dados ou se deseja que ele seja um atributo real visível na maircação. Se visível, apenas adicione cada um como itm.attr ('num', ctr);

    JavaScript é a melhor linguagem de programação de script e tem Node.js, AngularJS, vue.js e muitos bons framework JS.