javascript - JQuery循环遍历div并根据数据属性构建多行字符串

Question

我有两个问题:

1.) 如您所见，我有多个 div，当单击 callout panel notes div 时，我有 onclick 发生的事情.它访问 data-category 属性。我正在使用

$(this).parent().parent().siblings().first().data("category");

要访问它，这是可行的，但它看起来很乱。我尝试了 parents().last().data(...) 但从未奏效。我觉得有一个更有效的方法。所以任何意见将不胜感激。

2.) 我想不通的下一个问题。一些 div 具有 selected 类(在我单击 div 之后)。稍后我将点击一个按钮来获取选定的内容，并通过一些 ajax 内容发送它。还有 5 个其他“类别”，所以我需要将 .selected 内容与 data-category="a" 相关联，即，我需要确保它只在那个类别中循环。谁能帮我遍历 data-category="a" 并使用 .selected< 的 data-response-text 构建多行字符串类？

html如下:

<div class="row responses panel">
    <div class="small-12 column" data-category="a">
        <h3>Responses</h3>
    </div>

    <div class="small-12 column">
        <div class="callout panel notes" data-response-text="Info 1">
        Info 1
        </div>
    </div>

    <div class="small-12 column">
        <div class="callout panel notes selected" data-response-text="Info 2">
        Info 2
        </div>
    </div>

    <div class="small-12 column">
        <div class="callout panel notes selected" data-response-text="Info 3">
        Info 3
        </div>
    </div>

    <div class="small-12 column">
        <div class="callout panel notes selected" data-response-text="Info 4">
        <div class="remove-response"></div>
        Info 4
        </div>
    </div>

    <div class="small-12 column">
        <div class="add-new-box">
            <div class="add-new">
            Add Response
            </div>
            <div class="add-new-text">
                <input class="text-response" type="text" placeholder="Response">
            </div>
        </div>
    </div>

</div>


<div><span class="button">Submit</span></div>

Answer 1

对于第一部分你可以做:

$(this).closest('.row.responses').children(':first').data('category');

如果 .row 或 .responses 对于该级别元素是唯一的，那么您可以单独使用它。

对于第二部分，我假设“与数据类别 a 关联的内容”是指 .row.responses 中的元素，第一个元素具有 data-category="a"。如果是这样，那么您可以这样做:

var str = "";
var sls = $('[data-category="a"]').parent().find('.selected');
sls.each(function() {
    str += $(this).data('response-text') + "\n";
});