您好,我正在尝试获取我的 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
是我需要得到的。
最佳答案
我会坚持对一切都使用 jQuery,因为它非常易于使用。这里的代码本质上是相同的,只是以不同的方式获取标签。请注意,您不能使用 prev()
,因为 span
不是 input
的兄弟。您必须向上移动 DOM 到一个共同的祖先,然后返回 span
。
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);
};
<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>
关于javascript - 在 Html 中获取以前的 Span,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48614813/