Question

I have two jQuery elements, $link = $('<a>') and $input = $('<input/>').

Although they are two different types of elements, they are in my code (and in my mind!) very linked:

1) Conceptually, they are different representations of one object.

2) They share the same attributes.

3) When one is displayed on the screen, the other is hidden.

Until now, I have used .data() to perform a link between the two:

$link.data('$input', $input);
$input.data('$link', $link);

As my code became more and more complex, this solution has proved confusing and messy.

Is there a different approach I may want to consider? For example, is there a way to keep the attributes of the two elements continually synced? Is there a way to make one “meta-object” out of the two? etc.

Answer 1

Yes, use .add()

$link = $('<a>');
$input = $('<input />');
$both = $link.add($input);
$both.doStuff(); //Will apply to both