标签内容的jquery选择器答案

【问题标题】：jquery selector for label content标签内容的jquery选择器
【发布时间】：2017-02-12 15:34:58
【问题描述】：

我想为具有特定内容的标签找到一个 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();

因为这将匹配两个标签（因为两者都包含“名称”）。

是否有一些 equals-method 或 startsWith 以便我可以使用

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

提前致谢！

【问题讨论】：

在这里按预期工作：jsfiddle.net/x8etc6yq 你的问题是什么？？？
现在如果你想要完全匹配，你需要过滤它：jsfiddle.net/x8etc6yq/1
如果您需要完全匹配，只需在条件中使用$(this).text().trim() == "Name"。

标签： jquery label selector contains startswith

【解决方案1】：

您是否有必要使用文本包含过滤器，因为您可以使用以下代码在没有它的情况下获取标签的相应文本。请检查一下

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

【讨论】：

【解决方案2】：

: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" />

【讨论】：

@SamuelSkånberg 如果您需要完全匹配，只需在条件中使用$(this).text().trim() == "Name"。

【解决方案3】：

$(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"/>

【讨论】：

first() 链接到 next() 是多余的，因为 next() 只返回第一个下一个兄弟
错了：jsfiddle.net/sg8Lq2Lm 见next() DOC
@A.Wolff 是的，我错了，当我将 $(this).text().indexOf("Name") > -1 更改为 $(this ).text() == "名称"