Question

我有重复的数据被注入html，如下所示：

<div class="subFormContent" id="Results">

  <div class="subFormContentRow">
    <div class="subFormContentRowChildWrapper">
      <div id="subCtrlPreviewRow1-identifier" class="subCtrlPreviewRowContainer">
        <div id="subCtrlRow1column1-identifier" class="subCtrlPreviewCell">
          <div class="subCtrlPreviewCtrlHolder">
            <div class="control ">
              <label class="block label alignLabel">
                <span>value</span>
              </label>
              <input type="text" class="textInput block field" id="value-identifier" value="value1" />
            </div>
          </div>
        </div>

        <div id="subCtrlRow1column2-identifier" class="subCtrlPreviewCell">
          <div class="subCtrlPreviewCtrlHolder">
            <div class="control">
              <label class="block label alignLabel">
                <span>propName</span>
              </label>
              <input type="text" class="textInput block field" id="propName-identifier" value="propname1" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

...重复

我需要从第1列获取值，其中第2列使用JavaScript或jquery等于x，但它并不总是在同一行号上。但是，它只有一行，其中第2列是x。谁能想到办法做到这一点？

Answer 1

针对多行进行了更新

1.2更新，如果id以单词“value”和“propName”开头

$(document).ready(function(){
  var x = 5,
      row = $('.subFormContentRow');
  
  row.each(function(index, el){
   var  inputProp = $(el).find('[id^="propName"]'),
        inputVal = $(el).find('[id^="value"]');
        if(inputProp.val() == x){
          alert(inputVal.val());
        }

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="subFormContent" id="Results">

<div class="subFormContentRow">
  <div class="subFormContentRowChildWrapper">
    <div id="subCtrlPreviewRow1-identifier" class="subCtrlPreviewRowContainer">
      <div id="subCtrlRow1column1-identifier" class="subCtrlPreviewCell">
        <div class="subCtrlPreviewCtrlHolder">
          <div class="control">
            <label class="block label alignLabel">
            <span>value</span>
    </label>
    <input type="text" class="textInput block field" id="value-456456456" value="value1" />
          </div>
        </div>
      </div>

      <div id="subCtrlRow1column2-identifier" class="subCtrlPreviewCell">
        <div class="subCtrlPreviewCtrlHolder">
          <div class="control">
            <label class="block label alignLabel">
            <span>propName</span>
    </label>
    <input type="text" class="textInput block field" id="propName-45647898778645656" value="5" />
          </div>
        </div>
      </div>
    </div>

Answer 2

不应该以在页面上多次出现的方式使用ID。你仍然可以通过找到元素，遍历到行，然后找到值来完成它。

使用JQuery：

$("#propName[value='" + x + "']")
    .closest(".subFormContentRow").find("#value").val();

通过JavaScript重复HTML数据获得价值

2 个答案: