Question

我有一些像下面这样的html结构，我必须将每个容器内部div文本val存储到数据中，现在我编码如下js，它工作正常，但感觉不那么聪明，因为这些代码就像做同样的事情存储数据名称等于类名，但我必须键入并检查错误...是否可以更简单地做同样的事情？

<div class="container1">
    <div class="aq">text</div>
    <div class="be">text</div>
    <div class="co">text</div>
    <div class="dp">text</div>
    ...
</div>
<div class="container1">
    <div class="aq">text</div>
    <div class="be">text</div>
    <div class="co">text</div>
    <div class="dp">text</div>
    ...
</div>

<div class="container2">
    <div class="aa">text</div>
    <div class="bd">text</div>
    <div class="cs">text</div>
    <div class="dw">text</div>
    ...
</div>
<div class="container2">
    <div class="aa">text</div>
    <div class="bd">text</div>
    <div class="cs">text</div>
    <div class="dw">text</div>
    ...
</div>

JS

$(".container1").each(function(){
    $(this).data('aq', $(this).find('.aq').text());
    $(this).data('be', $(this).find('.be').text());
    $(this).data('co', $(this).find('.co').text());
    $(this).data('dp', $(this).find('.dp').text());
});
$(".container2").each(function(){
    $(this).data('aa', $(this).find('.aa').text());
    $(this).data('bd', $(this).find('.bd').text());
    $(this).data('cs', $(this).find('.cs').text());
    $(this).data('dw', $(this).find('.dw').text());
});

Answer 1

$('[class^=container] div').each(function(){
    $(this).parent().data($(this).prop('class'), $(this).text());    
});

Here's a fiddle

Answer 2

$('div[class^=container]').children('div').each(function(){
  var $item = $(this), $container = $item.parent();
  $container.data($item.attr('class'), $item.text());
})

但是，所有容器都应该有一个公共类来避免使用class^=container选择器。也许你可以做class="container container1"

存储数据名称等于每个类名

2 个答案: