Jquery [attribute] Selectors

Question

So I've seen several posts explaining how to use a variable in a value for attribute selection. i.e. (where the JS event refers to the div (making it $(this):

HTML

<div id="item1"></div>
<div id="item1" style="display: none;"></div>

JS

var find = $(this).attr("id")
$('div[id="'+find+'"]').show();

But I would like to know how to use a variable in a jquery selector to find something with a similar string to the value of the variable. i.e. finding an element from the example above but looking for "#item1div", where the event target is still "#item1"

HTML

<div id="item1"></div>
<div id="item1div" style="display: none;"></div>

JS

var find = $(this).attr("id")
$('div[id="'+find+"div"'"]').show(); // incorrect syntax

So my question is: How do I correct the above syntax to include an additional string in the attribute check?

I can't find any reference to the correct syntax for how to add compile a string of the value of a variable and an explicit string then check that as the value for x attribute.

I know I can use [id*="'+find+'"] here because the alternate id contains the same characters as the basic one, but I want to know how to target a specific other id based on the first one. For example if I had #item1, #item1div, and #item1img, how can I use an event on "#item1" to find attribute values equal to "item1div" and/or "item1img"

EDIT: I also just realized I can just use [id|="'+find+'"] if I name the divs accordingly with hyphens, but again doesn't solve ids with different endings (or different strings that come after the hyphen)

You should use ID selector `$('#' + find).show()` instead of `$('.Divs[id="'+find+'"]').show();`. So you can use `$('#' + find + 'div')` to find `#item1div` or anything dynamic on the first part. Note: the incorrect you had mentioned is because of a missing `+` - It should be `$('div[id="'+find+"div" **+**'"]').show();` — Selvakumar Arumugam, Aug 27 '15 at 17:14
the question is very unclear. what are you trying to do? do a wildcard search ? — taesu, Aug 27 '15 at 17:15
here are some ideas: http://stackoverflow.com/questions/13541898/how-can-i-select-an-element-by-id-with-jquery-using-regex http://stackoverflow.com/questions/190253/jquery-selector-regular-expressions — eaCe, Aug 27 '15 at 17:17
The error is here : `"div"'"]'` you only need to write `"div"]'` but you shouldn't select ids that way. Use `'#' + find` instead. Also, this might help: http://api.jquery.com/category/selectors/ — VVV, Aug 27 '15 at 17:17
If I have understand the question clearly, then see my answer if it helps you — Ankit Agarwal, Aug 27 '15 at 17:27

score 0 · Answer 1 · answered Aug 27 '15 at 17:17

0

the question is very unclear, but I assume your question boils down to :

Q:how do you search all the elements where it starts with string x ?

A:To get all the elements starting with "item1" you should use:

$("[id^=item1]")

answered Aug 27 '15 at 17:17

taesu

4,482
4
23
41

Sorry, I try to include all the details and things I've thought of trying to be as clear about how far I am into the problem solve. The question boils down to how do I correctly use: `$('div[id="'+find+"div"'"]').show(); // incorrect syntax` to input the value of a variable in an attribute check, but then add something additional to that string that the variable equates to (like adding "div" to "item1") – Robert H Aug 27 '15 at 17:20

score 0 · Accepted Answer · answered Aug 27 '15 at 17:20

0

$('div[id="'+find+"div"'"]') isn't valid Javascript syntax:

$(          // jQuery function
'div[id="'  // String
+ find      // Add variable
+ "div"     // Add String
'"]'        // Unexpected string! - Error

One example of valid syntax would be:

$('div[id="'+find+'div"]')

However, since it's an id, you can use the id selector instead:

$('div#'+find+'div')

answered Aug 27 '15 at 17:20

Stryner

7,288
3
18
18

This was very helpful, as were most everyone comments and answers. But I really appreciate the breakdown of what my syntax what doing and where it went wrong. I'm learning more javascript everyday and sometimes I feel like my syntax is close but can't quite figure out what I'm missing or leaving out. Also, to appease the javascript experts I am now trying to use the proper `('#'+var+)` to select ids - I didn't realize this was used as a selector specifically for id's. No wonder I couldnt find anything on `[id="` Thanks Again. – Robert H Aug 27 '15 at 17:33
@RobertH Both ways [should work](http://jsfiddle.net/c3j8zLww/2/). The `#` syntax is just shorter and usually easier to read. There are also subtle differences too; if your selector only uses `#` (e.g., `$("#someId")`), then the selector engine can optimize it and it will only retrieve the first instance. – Stryner Aug 27 '15 at 17:43

score 0 · Answer 3 · answered Aug 27 '15 at 17:20

You should use ID selector like below to find an element by ID,

$('#' + find).show();

To find item1div or the dynamic first part - $('#' + find + 'div')

Note: the incorrect syntax you had mentioned is because of a missing + - It should be

//                     V-- you missed this
$('div[id="'+find+"div"+'"]').show();

score 0 · Answer 4 · answered Aug 27 '15 at 17:25

To add the explicit string to the attr value you can write as follows

$('[attr="'+attrVal+'extraString"]')

For evample in case of id of div itemdiv

var item1ID = $('#item1').attr('id');   // item1
$('[id="'+item1ID+'div"]')              // valid selector to select #item1div

Jquery [attribute] Selectors

4 Answers4

Linked