Question

您好我试图在我用作标签的html中获取上一个范围，我已尝试过jquery .prev（[selector]），但选择器不起作用，它返回我得到的输入字段的父跨度。

这是我的HTML和脚本：

<form>
<span class="a-text-bold">
    Add product detail
</span>

<div class="a-section a-spacing-base">
    <div class="a-section a-spacing-mini">
        <span class="a-text-bold">
        Brand name
        </span>
    </div>
    <span class="a-declarative" data-action="form-item-action">
        <span class="a-declarative">
        <input type="text" maxlength="50" value="Bubble Goth Babes" id="data-draft-brand-name" autocomplete="off" name="data[draft][brand_name]" class="a-input-text a-form-normal  gear-filter-control-characters-textbox  lock-needs-hidden">
        </span>
    </span>
</div>
<div class="a-section a-spacing-base">
    <div class="a-section a-spacing-mini">
        <span class="a-text-bold">
        Title of product
        </span>
    </div>
    <span class="a-declarative" data-action="form-item-action">
        <span class="a-declarative">
        <input type="text" maxlength="50" value="Cute Zombkitty Zombie Kitten Neon Funny Brain Cat" id="data-draft-name-en-us" autocomplete="off" name="data[draft][brand_name]" class="a-input-text a-form-normal  gear-filter-control-characters-textbox  lock-needs-hidden">
        </span>
    </span>
</div>
    <button onclick="getLabelAndValue()">Get</button>
</form>



<script type="text/javascript">

    function getLabelAndValue(){

        var focused = document.activeElement;

        var form = document.getElementsByName(focused.form.name);

        for (var i = 0; i < form.length; i++) {
            if(form[i].tagName.toLowerCase() == "input" && form[i].getAttribute('type').toLowerCase() == "text"){
                console.log($("#" + form[i].id).prev("span .a-text-bold").text()); //Doesn't work
                console.log(form[i].value); //Already working, means I'm pointing to right element
            }
        }

    }

</script>

我试图在console.log上看到的是：

//Brand Name
//Bubble Goth Babes

//Title of Product
//Cute Zombkitty Zombie Kitten Neon Funny Brain Cat

注意：我已经能够获取表单元素值（form[i].value），只需使用className a-text-bold之前的范围就是我需要的得到。

Answer 1

我会坚持使用jQuery来处理所有事情，因为它很容易使用。这里的代码基本相同，只是以不同的方式获得标签。请注意，您无法使用prev()，因为span不是input的兄弟。您必须将DOM移至共同的祖先，然后退回span。

＆＃13;

function getLabelAndValue(e) {
  e.preventDefault();
  var form = e.target.form;
  var inputs = $('input[type="text"]', form);

  inputs.each(function (input) {
    // get the closest common ancestor, then find the "a-text-bold" span.
    var label = $(this).closest(".a-section").find(".a-text-bold").text().trim();
    console.log(label);
    console.log(this.value); //Already working, means I'm pointing to right element
  });

}
window.onload = function() {
  document.getElementById("get").addEventListener("click", getLabelAndValue);
};

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <span class="a-text-bold">
    Add product detail
</span>

  <div class="a-section a-spacing-base">
    <div class="a-section a-spacing-mini">
      <span class="a-text-bold">
        Brand name
        </span>
    </div>
    <span class="a-declarative" data-action="form-item-action">
        <span class="a-declarative">
        <input type="text" maxlength="50" value="Bubble Goth Babes" id="data-draft-brand-name" autocomplete="off" name="data[draft][brand_name]" class="a-input-text a-form-normal  gear-filter-control-characters-textbox  lock-needs-hidden">
        </span>
    </span>
  </div>
  <div class="a-section a-spacing-base">
    <div class="a-section a-spacing-mini">
      <span class="a-text-bold">
        Title of product
        </span>
    </div>
    <span class="a-declarative" data-action="form-item-action">
        <span class="a-declarative">
        <input type="text" maxlength="50" value="Cute Zombkitty Zombie Kitten Neon Funny Brain Cat" id="data-draft-name-en-us" autocomplete="off" name="data[draft][brand_name]" class="a-input-text a-form-normal  gear-filter-control-characters-textbox  lock-needs-hidden">
        </span>
    </span>
  </div>
  <button id="get">Get</button>
</form>

＆＃13;

获取之前的Html跨度

1 个答案: