jquery 标签内容选择器

Question

我想为具有特定内容的标签找到 jquery 选择器。

所以有了下面的html

<label for="foo1">Name</label>
<input type="text" name="foo1" id="foo1" value="Fadime"/>

<label for="foo2">SecondName</label>
<input type="text" name="foo2" id="foo2" value="Alice"/>

我希望通过前面标签的内容访问得到内容"Fadime"。我不想使用输入的名称或 ID，因为它们是自动生成的并且可能会更改。但标签的内容将保持不变。对于我知道的第二个名字，我可以使用：

var second_name = $("label:contains('SecondName')").next().val();

但是，我无法获取名字的内容：

var name = $("label:contains('Name')").next().val();

因为这将匹配两个标签（因为都包含 "Name"）。

是否有一些等号方法或 startsWith 以便我可以使用

var name = $("label:equals('Name')").next().val();

提前致谢！

Answer 1

:contains用于元素。不适用于文本。您需要使用 .filter():

$(function () {
  $("label").filter(function () {
    return $(this).text().indexOf("SecondName") > -1;
  }).next("input").val("Ha ha ha!");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="foo1">Name</label>
<input type="text" name="foo1" id="foo1" value="Fadime"/>

<label for="foo2">SecondName</label>
<input type="text" name="foo2" id="foo2" value="Alice"/>

正在将第二个名字打印到控制台：

$(function() {
  console.log(
    $("label").filter(function() {
      return $(this).text().indexOf("SecondName") > -1;
    }).next("input").val()
  );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="foo1">Name</label>
<input type="text" name="foo1" id="foo1" value="Fadime" />

<label for="foo2">SecondName</label>
<input type="text" name="foo2" id="foo2" value="Alice" />

Answer 2

$(function () {
  $("label").filter(function () {
    return $(this).text()=="Name"
  }).next("input").val("Ha ha ha!");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="foo1">Name</label>
<input type="text" name="foo1" id="foo1" value="Fadime"/>

<label for="foo2">SecondName</label>
<input type="text" name="foo2" id="foo2" value="Alice"/>

Answer 3

您是否有必要使用 text contains 过滤器，因为您可以使用下面的代码在没有标签的情况下获取相应的标签文本。请查收

$(document).ready(function() {
   $('label').click( function () {
    $id = $(this).attr('for'); 
    console.log($('#'+$id).val());
   });
});

jquery 标签内容选择器

jquery selector for label content

jquery

label

contains

startswith

selector