closest() 没有返回最接近我的输入的标签

Question

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

有时候是这样的:

<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() 但它没有 return 标签：

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

我的代码有什么问题？

Answer 1

这样做：（经过测试和验证。）

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

Answer 2

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 3

使用

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

Answer 4

closest() is not the right choice for you, which search for ancestors and not it's siblings. So instead you can use prevAll() or siblings()

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

<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>

Answer 5

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

WORKING FIDDLE

Answer 6

这一定对你有用

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

Answer 7

实际上，如果您修改 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 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>

closest() 没有返回最接近我的输入的标签

closest() not returning the closest label to my input

jquery

selector