Jquery [attribute] Selectors

Question

So I've seen several posts explaining how to use a variable in a value for attribute selection. ie (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. ie 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)

Answer 1

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]")

Answer 2

$('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')

Answer 3

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();

Answer 4

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