使用jQuery获取HTML属性值

<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>

找到每个Select SubHeader和Group值的最佳方法是什么？例如第一个：
组值：15
副标题值：10
选项值：1使用jQuery获取HTML属性值

和第二之一：
组值：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'); 
});

编辑更改标签值数据值

来源

2014-10-02 Üllar

如果你不介意我的问题，为什么标签持有价值，你是否能够改变标记呢？ – Ohgodwhy 2014-10-02 09:40:20

我也意识到持有价值的标签可能是错误的。不过，我必须分配一个具有特定值的文本，我从服务器中检索。我正在使用jQuery移动，并从API中找到我可以用数据标签替换标签（http://api.jquerymobile.com/data-attribute/）。我可以对标记进行较小的更改。包装divs是必要的。仍然主要的问题是：有没有更好的解决方案来获得attibute值而不使用这些parent（）方法？ @Ohgodwhy – 2014-10-02 12:33:41

这不是从选去，然后用家长达集团，将从块开始，深入到所选择的选项。

它仍然是循环槽的元素，但没有使用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我已经添加控制台日志，以便您可以检查，如果一切是你所期望的。

来源

2014-10-02 13:54:06 Kesty

由于您使用的数据属性，只要使用这个jQuery的语法：

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

要获得来自以下标签的值（ID优于名称）：

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

使用此：

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

来源

2014-10-02 13:25:46

我无法使用标签的标签。 var dataValue = $（'label [name = clsfName]'）。data（“value”）也不能作为必要条件。 – 2014-10-02 13:47:26

如果您不能使用ID，则需要遍历DOM。使用find（）比parent（）更好，因为它更容易阅读，但它仍然非常混乱。我会开始： $（“div .clsfWrapper”）。each（function（）{把你的$（this）.find（）逻辑}}; – 2014-10-02 14:25:39

使用jQuery获取HTML属性值

回答

相关问题