Question

我的页面上有这种HTML，我想获取文本字段值（使用对label标签上方文本的引用）。我不能使用类或ID，因为它们都是动态的，不能那样。我的HTML代码如下：

<div class="field required">
    <label class="label" for="options_114_text">
        <span>Length</span>
    </label>
    <div class="control">
       <input type="text" id="options_114_text" class="input-text product-custom-option" name="options[114]" data-selector="options[114]" value="" aria-required="true">
    </div>
</div>

我正在尝试这样的代码但是有问题如何引用它？

jQuery(document).ready(function() {
    if (jQuery('.field > label > span:contains("Length")').length > 0) {
        //How i refrence length textfield not width one here.I need here  
        jQuery('#options_114_text').val();
    }

    if (jQuery('.field > label > span:contains("Width")').length > 0) {

    }
});

HMTL代码是从PHP渲染的，对于文本字段不能是相同的ID。所以这就是我尝试每次都会存在的上述文本的原因。

Answer 1

选择标签后，您可以转到父div并在其中找到输入字段。

$(document).ready(function() {
        if ($('.field > label > span:contains("Length")').length > 0) {
            //How i refrence length textfield not width one here.I need here  
            var textfield = $('.field > label > span:contains("Length")').closest('.field').find('input');
            console.log(textfield.val());
        }
        if ($('.field > label > span:contains("Width")').length > 0) {

        }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field required">
   <label class="label" for="options_114_text">
       <span>Length</span>
   </label>
   <div class="control">
       <input type="text" id="options_114_text" class="input-text product-custom-option" name="options[114]" data-selector="options[114]" value="test" aria-required="true">
   </div>
</div>

Answer 2

像这样：

function get_val(_span_text){
  var out=null;
  $('.field').each(function(){
	var span_text=$(this).find('label').find('span').text();
	var input_val=$(this).find('div').find('input').val();
	    /* or  var input=$(this).find('div').find('input'); for DOM manipulation  */
	if(span_text==_span_text){
		  out=input_val
		/* or out=input; for DOM manipulation */
	}
  });
  return out;
}

 console.log('Length=>'+get_val('Length'));
 console.log('Width=>'+get_val('Width'));

       div{
       	 display:inline-block;
       	 border-style:solid;
       	 border-width:2px;
       	 border-color:gray;
       	 padding:10px;
       }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

   <div class="field required">
        <label class="label" for="options_114_text">
            <span>Length</span>
        </label>
        <div class="control">
            <input type="text" id="options_114_text" class="input-text product-custom-option" name="options[114]" data-selector="options[114]" value="12" aria-required="true">
        </div>
   </div>

   <div class="field required">
        <label class="label" for="options_114_text">
            <span>Width</span>
        </label>
        <div class="control">
            <input type="text" id="options_114_text" class="input-text product-custom-option" name="options[114]" data-selector="options[114]" value="18" aria-required="true">
        </div>
   </div>

使用jQuery获取相对于标签的textfield值

2 个答案: