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

【问题标题】：store data name equal each class name存储数据名称等于每个类名称
【发布时间】：2013-07-21 14:31:38
【问题描述】：

我有一些像下面这样的 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>

$(".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());
});

【问题讨论】：

标签： jquery

【解决方案1】：

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

Here's a fiddle

【讨论】：

如果容器和需要存储数据的div之间不只有一层父子，不知道有多少。如何从孩子中找到父母？
就像从父级查找子级一样可以使用 find(class)
@user $(this).closest('[class^=container]') 会找到最近的div starting with container

【解决方案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"

【讨论】：