Question

我需要选择输入上方的标签并获取其文本。

有时就是这样：

<div id="q1">
    <label class="question_label">Label q1</label>
    <input type ="text">
</div>

有时那样：

<div id="q2">
    <label class="question_label">Label q2</label>
    <br>
    <input type ="text">
</div>

我与prev()绑定，但有时输入和标签之间有<br>，所以prev并不总是有效。我也试过closest()，但它没有返回标签：

$(':input').each(function () {
    alert($(this).closest('label').text());
});

我的代码有什么问题？

Answer 1

是这样的:(经过测试和验证。）

$(':input').each(function () {
    alert($(this).parent().find('label').text());
});

Answer 2

实际上，如果你修改你的html，那么你可以得到你正在尝试做的事情：

<div id="q2">
    <label for="inputq2" class="question_label">Label q2</label>
    <br>
    <input type ="text" id="inputq2">
</div>

我上面所做的是：

在每个标签中定义for的唯一值。
在输入字段中定义id，与响应它的标签完全相同。

现在，这样做：

$(':input').each(function () {
    alert($('label[for="'+this.id+'"]').text());
});

Answer 3

closest找到最近的父元素。

使用prev获取上一个元素：

$(':input').each(function () {
    alert($(this).prev('.question_label').text());
});

但您有<br />代码，因此您可以使用prevAll：

    $(':input').each(function () {
        alert($(this).prevAll('.question_label').text());
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="q2">
    <label class="question_label">Label q2</label>
    <br>
    <input type ="text">
</div>

或者，您可以使用siblings选择元素的前一个（全部）或下一个（全部）。

Answer 4

这肯定适合你

$(':input').each(function(index,$text){
    alert($(this).parent().find('label.question_label').text());
});

Answer 5

使用

$(':input').each(function () {
    alert($(this).parent().children("label").text());
});

Answer 6

closest() 不是您的正确选择，它会搜索祖先而不是它的兄弟姐妹。因此，您可以使用 prevAll() 或 siblings()

＆＃13;

console.log($(':input').prevAll('label').text());
console.log($(':input').siblings('label').text());

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="q2">
  <label class="question_label">Label q2</label>
  <br>
  <input type="text">
</div>

＆＃13;

Answer 7

$(':text').each(function () {
    alert($(this).siblings('label').text());
});

<强> WORKING FIDDLE

Answer 8

<!DOCTYPE html>
<html>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>


<script>
    $(document).ready(function () {

        $(':input').each(function () {
            alert($(this).closest('div#q2').find('.question_label').text());
        });
    });


</script>



<body>

  <div id="q2">
    <label class="question_label">Label q2</label>
    <br>
    <input type ="text">
</div> 
</body>
</html>

nearest（）没有将最接近的标签返回到我的输入

8 个答案: