I have two kind of <textarea>:

1) Posts: id="textarea-post-{id}"

2) Comments: id="textarea-cmnt-{id}"

For example, here is all textarea in the page:

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

Ok well, Now I want to know, how can I select all the post kind textarea ? These:

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

I have two kind of <textarea>:

1) Posts: id="textarea-post-{id}"

2) Comments: id="textarea-cmnt-{id}"

For example, here is all textarea in the page:

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

Ok well, Now I want to know, how can I select all the post kind textarea ? These:

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

• javascript
• jquery
• html
• element

• @SheraliTurdiyev actually I just can select all textarea like this: $('textarea'), or specific id like this: $('#textareaid'). – Shafizadeh Commented Oct 9, 2015 at 13:36
• 3 If you give textarea-post-{id} the class textarea-post and textarea-cmnt-{id} the class textarea-cmnt you can use $(".textarea-post") – Halcyon Commented Oct 9, 2015 at 13:37
• You should really add an appropriate class to these elements so you don't need to use such messy selectors. – Bill Criswell Commented Oct 9, 2015 at 13:41
• 1 @Sajad. just use this $('[id^=textarea-post]')... – Sherali Turdiyev Commented Oct 9, 2015 at 13:46

8 Answers 8

You can use a css selector with querySelectorAll like this :

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

The ^= operator will look for every element with an id starting with textarea-post.

jQuery version :

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

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

<script src="https://ajax.googleapis./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>

Check this.

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

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

<script src="https://ajax.googleapis./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>

This is howw you select all textarea with id value that starts with textarea-post-:

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

Similarly,

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

Working Example:

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

<script src="https://ajax.googleapis./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>

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

This will get all textarea-post- then itterate through each one and get the value $(this).val();

This is what you are looking for $('[id^="textarea-post-"]'). Starts with selector ^= is a proper approach for your case.

Its very easy by CSS using [attribute$=value] Selector will do the trick.

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

you can use jquery lib and use its function Jquery library link here

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

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

Instead of p use textarea