使用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屬性值

回答

相關問題