Question

<html>
<body>
<div class="block-a">
<label data-value="15" name=symptom">Group1</label>
<div class="clsfWrapper">
    <label data-value="10" name=clsfName"> SubHeader1</label>
    <div class="ui-select">
        <div class="ui-btn">
            <span>SelectedValue</span>
            <select class="selectClass">
            <option value="1">value1</option>
            <option value="2">value2</option>
            <option value="3">value3</option>
          </select>
        </div>
    </div>
</div>
<div class="clsfWrapper">
    <label data-value="11" name=clsfName"> SubHeader2</label>
    <div class="ui-select">
        <div class="ui-btn">
            <span>SelectedValue</span>
            <select class="selectClass">
            <option value="1">value1</option>
            <option value="2">value2</option>
            <option value="3">value3</option>
          </select>
        </div>
    </div>
</div>
</div>
<div class="block-a">
<label data-value="16" name=symptom">Group2</label>
<div class="clsfWrapper">
    <label data-value="5" name=clsfName"> SubHeader1</label>
    <div class="ui-select">
        <div class="ui-btn">
            <span>SelectedValue</span>
            <select class="selectClass">
            <option value="1">value1</option>
            <option value="2">value2</option>
            <option value="3">value3</option>
          </select>
        </div>
    </div>
</div>
<div class="clsfWrapper">
    <label data-value="6" name=clsfName"> SubHeader2</label>
    <div class="ui-select">
        <div class="ui-btn">
            <span>SelectedValue</span>
            <select class="selectClass">
            <option value="1">value1</option>
            <option value="2">value2</option>
            <option value="3">value3</option>
          </select>
        </div>
    </div>
</div>
</div>
</html>
</body>

找到每个选择的SubHeader和Group值的最佳方法是什么？例如第一个：
团体价值：15
副标题值：10
期权价值：1

和第二个：
团体价值：15
副标题值：11
期权价值：1

我有一种非常强大的方式来获取这些价值观，我想知道是否有更容易和更确定的方式 jQuery的：

function getHtmlAttributes(){
$.each($('#page_visit_reg_new_colds_2 option:selected'), function(key, value){
    var optionParent = $(this).parent();
    var selectParent = optionParent.parent();
    var divParent1 = selectParent.parent();
    var divParent2 = divParent1.parent();
    var subheaderName = divParent1.parent().find('label[name=clsfName]').data('value');
    var groupName = divParent2.parent().find('label[name=symptom]').data('value');
});

编辑将标签值更改为数据值

Answer 1

由于您正在使用data属性，因此只需使用此jQuery语法：

$("#elementName").data("DataAttribute");

要从以下标签获取值（ID优于名称）：

<label data-value="11" id="clsfName"> SubHeader2</label>

使用此：

var dataValue = $("#clsfName").data("value");

Answer 2

这不是从选项开始，而是从父级到组，将从块开始，然后转到所选选项。

它仍在使用元素循环，但未使用parent()

$.each($('.block-a'), function(){   
    var groupName = $(this).find("label[name='symptom']").data('value');
    $.each($(this).find(".clsfWrapper"), function(){ 
         var subheaderName = $(this).find("label[name='clsfName']").data('value');                  
        $.each($(this).find('select option:selected'), function(){ 
            var optionvalue = $(this).val();
        });
    });
});

在JSFiddle我添加了控制台日志，以便您检查一切是否符合您的预期。

使用jQuery获取HTML属性值

2 个答案: