Select DIV using its ID + addition

Question

Using a div as selector is easy:

<div id="test1"></div>
$('#test1').doSomething();

I want to target only another div, containing the same ID + _sub:

<div id="test1"></div>
<div id="test1_sub"></div>
$('#test1').find( /* Same ID + "_sub" */ ).doSomething();

How can I do this? I know I can use .attr('id') to take #test1, but I do not how to extend this with _sub.

JS FIDDLE

Of course it would be easy to target the #test1_sub directly, but image I have 1000 divs counting up test1, test2, test3, etc. and want to use this inside of a function.

Unclear what you are asking because IDs must be unique on document context so `#test1_sub` would work just fine and anyway regarding your posted code, `#test1_sub` isn't descendant of `#test1` so i'm really not sure what you are expecting?! — A. Wolff, Jul 05 '15 at 18:01
I have tried to explain it. @AhmetCanGüven this does not work for me, check this fiddle http://jsfiddle.net/marianrick/0gdrk7bx/ — Marian Rick, Jul 05 '15 at 18:03
To target all `sub` DIVs, you could use e.g: `$('[id^=test][id$=_sub]').fadeOut();`. To target a specific one, you could use: `$('#' + this.id + '_sub')` where `this` refers to specific `#testx` div. But your question missing some context to make it clearer regarding expected behaviour. And btw, sounds like a XY problem where IDs should be needed but instead use relevant sibling selector or transversal method, e.g: `$('#test1 + div')` or whatever — A. Wolff, Jul 05 '15 at 18:06
@AhmetCanGüven You should admit this question doesn't really make sense and even more seeing the accepted answer... ;) — A. Wolff, Jul 05 '15 at 18:15
I am sorry @AhmetCanGüven, but my aim is to target only the `_sub` div, which your answer does not include (even if your comment does, which was the fastest and correct one ;) ) — Marian Rick, Jul 05 '15 at 18:15
That I am using a plugin, which appends elements into the DOM, so I cannot bind every selector on `$(document).ready(function(){});`. Inside a `.on('click', function(){})` I need to append another div `_sub`, and the only thing I got is a `var $current = $('#test1')`. Its quite hard to explain in a few words! But I totally do agree, I should target the div directly if I could. — Marian Rick, Jul 05 '15 at 18:18
@MarianRick please see http://mywiki.wooledge.org/XyProblem and maybe ask new question regarding your former problem, not regarding the workaround you think would fix it — A. Wolff, Jul 05 '15 at 18:19
@A. Wolff thanks for your effort, but I have got a "ton" of code, which I am not really able to understand. Thats why its so hard for me to work with it. You can check another question of mine, where you can see my full code. Currently I am creating my own solution, because I need to send the page to my client tomorrow morning, and its quite hard, to let others digg into the whole process (as you can see on the wired way of asking my question): http://stackoverflow.com/questions/31102463/royalslider-how-to-remove-a-slide-using-a-class-as-selector?noredirect=1#comment50464850_31102463 — Marian Rick, Jul 05 '15 at 18:22
@MarianRick With a so short deadline, ya, go with it if that fixes your problem, you still will have more time to find a better way, later ;) — A. Wolff, Jul 05 '15 at 18:23

score 2 · Answer 1 · answered Jul 05 '15 at 18:04

2

You do it like this

$('#test1' + "_sub").fadeOut();

Note the quotation-marks containing "_sub".

EDIT: In your answer, you made up an example where you had 100 divs with ids like test1, test2 and so on. Then you could select all elements with an id beginning with test. Like this:

$('*[id^="test"]').fadeOut();

answered Jul 05 '15 at 18:04

Gustaf Gunér

2,272
4
17
23

but `$('*[id^="test"]')` will target all DIVs with ID starting with test, not only sub DIVs. And concatenate hardcoded strings `'#test1' + "_sub"` doesn't really make sense. How can this be accepted answer? – A. Wolff Jul 05 '15 at 18:18

Carl K · Answer 2 · 2015-07-05T18:15:05.690

2

Set a variable and chain: (CORRECTED)

var target = $(whatever test div you targetted).attr('id');
$('#'+target + "_sub").doSomething();

You said you were going to use it in a function, so it would be targettable this way for example. Lets say when you click #test1 a function will run on all subs based on the clicked test:

$('.testBoxes').click(function () {
   var target = $(this).attr('id');
   $('#'+target + "_sub").doSomething();
});

edited Jul 05 '15 at 18:15

answered Jul 05 '15 at 18:06

Carl K

974
7
18

sub DIV isn't decendant of `#testx` DIV – A. Wolff Jul 05 '15 at 18:08
@A.Wolff Thanks for the catch. Fixed – Carl K Jul 05 '15 at 18:15

score 2 · Answer 3 · answered Jul 05 '15 at 18:06

Here you can use start with selector to work with all ids.

jsFiddle

$(document).ready(function(){
$( "*[id^='test1']" ).fadeOut();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="test1">Test 1</div>
<div id="test1_sub"> Test 1 Sub</div>
<div id="test1_asdf">Test 1 ASDF</div>
<div id="test1_sub342"> Test 1 sub342</div>
<div id="test1_sdfsd">Test 1 sdfsd</div>
<div id="test1_45645"> Test 1 45645</div>

Select DIV using its ID + addition

3 Answers3