Question

我有两种<textarea>：

1）帖子：id="textarea-post-{id}"

2）评论：id="textarea-cmnt-{id}"

例如，以下是页面中的所有textarea：

<textarea id="textarea-post-1"></textarea>
<textarea id="textarea-cmnt-1"></textarea>
<textarea id="textarea-cmnt-2"></textarea>
<textarea id="textarea-cmnt-3"></textarea>
<textarea id="textarea-post-2"></textarea>
<textarea id="textarea-cmnt-4"></textarea>
<textarea id="textarea-cmnt-5"></textarea>
<textarea id="textarea-post-3"></textarea>
<textarea id="textarea-cmnt-6"></textarea>

好的，现在我想知道，如何选择所有帖子类型 textarea？这些：

<textarea id="textarea-post-1"></textarea>
<textarea id="textarea-post-2"></textarea>
<textarea id="textarea-post-3"></textarea>

Answer 1

您可以像这样使用querySelectorAll的css选择器：

document.querySelectorAll('[id^="textarea-post"]');

^=运算符会查找ID为textarea-post的每个元素。

jQuery版本：

$('[id^="textarea-post"]');

Answer 2

＆＃13;

console.log($('textarea[id*=post]'));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<textarea id="textarea-post-1"></textarea>
<textarea id="textarea-cmnt-1"></textarea>
<textarea id="textarea-cmnt-2"></textarea>
<textarea id="textarea-cmnt-3"></textarea>
<textarea id="textarea-post-2"></textarea>
<textarea id="textarea-cmnt-4"></textarea>
<textarea id="textarea-cmnt-5"></textarea>
<textarea id="textarea-post-3"></textarea>
<textarea id="textarea-cmnt-6"></textarea>

＆＃13;

Answer 3

检查一下。

＆＃13;

$('textarea[id^="textarea-post"]').click(function(){
  $(this).css('background-color', 'green');
});

＆＃13;

textarea[id^="textarea-post"]{
		background-color:red;
	}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="textarea-post-1"></textarea>
<textarea id="textarea-cmnt-1"></textarea>
<textarea id="textarea-cmnt-2"></textarea>
<textarea id="textarea-cmnt-3"></textarea>
<textarea id="textarea-post-2"></textarea>
<textarea id="textarea-cmnt-4"></textarea>
<textarea id="textarea-cmnt-5"></textarea>
<textarea id="textarea-post-3"></textarea>
<textarea id="textarea-cmnt-6"></textarea>

＆＃13;

Answer 4

这是您如何选择以id开头的textarea-post-值的所有textarea：

$("textarea[id^='textarea-post-']")

类似地，

$("textarea[id^='textarea-cmnt-']")

工作示例：

＆＃13;

console.log($("textarea[id^='textarea-post-']"));  // outputs all textarea with `id` value starting with `textarea-post-`.

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<textarea id="textarea-post-1"></textarea>
<textarea id="textarea-cmnt-1"></textarea>
<textarea id="textarea-cmnt-2"></textarea>
<textarea id="textarea-cmnt-3"></textarea>
<textarea id="textarea-post-2"></textarea>
<textarea id="textarea-cmnt-4"></textarea>
<textarea id="textarea-cmnt-5"></textarea>
<textarea id="textarea-post-3"></textarea>
<textarea id="textarea-cmnt-6"></textarea>

＆＃13;

Answer 5

$('[id^="textarea-post-"]').each(function () {
  $(this).val();
});

这会让所有textarea-post-然后通过每个{it}审核并获得值$(this).val();

Answer 6

这是您正在寻找的$('[id^="textarea-post-"]')。从选择器^=开始是适合您案例的方法。

Answer 7

通过CSS使用[attribute $ = value]非常容易，Selector会做到这一点。

textarea[id$="post"]{
 color:red
}
textarea[id$="cmnt"]{
 color:blue
}

Answer 8

你可以使用jquery lib并使用它的功能 vagrant-dns

＆＃13;

$(‘p:nth-child(3))	gets the 3rd <p> element of the parent. n=even, odd too.

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

＆＃13;

而不是使用textarea

如何选择某种元素？

8 个答案: