0

I like to treat the DOM in an object oriented fashion so that I can have a highly repetitive structure and perform actions to particular parts. For example, say I have this:

<div class='clickable'>This is Div1
   <div class='attr1'>Hello there</div>
   <div class='attr2'>Foo-Bar</div>
</div>

<div class='clickable'>This is Div2
   <div class='attr1'>Hello there</div>
   <div class='attr2'>Foo-Bar</div>
</div>

And then I have some javascript to say that all div's of class 'clickable' run this function:

function wasClicked(e){
   //just some magic so that 'clicked' references the whichever div was clicked
   var clicked = var sender = (e && e.target) || (window.event && window.event.srcElement);
   $(clicked).children('.attr1').css('background-color','blue')
}

So now, if any div of class 'clickable' is clicked and it has a child div of class 'attr1', then the 'attr1' div will have it's background color-change. And this will only happen for the one div that's been clicked.

I love using this "don't repeat yourself principle", but is there a cleaner way to do this? I don't think the class attribute of the DOM was supposed to be used for this purpose. I could carelessly create two child divs with the same class by accident. And the $(clicked).children.('attr1')... is just ugly.

There's gotta be a better way.

3
  • Are you using this structure for public websites? By using only divs, you undermine HTML's semantics, which are what makes pages accessible. When removing all scripts and CSS, all you will see now is text. Your browser now does not know which items are headers, paragraphs or other elements. Same goes for crawlers and screen readers. I recommend reading about semantics. HTML is not a programming language, but a markup language. Please don't treat it as something it is not. Sep 13, 2013 at 10:37
  • Slightly confused by what you are doing, but you should be able to lose the sub classes easily instead using something like $(".clickable").children("div").bind("click" , handler); Sep 13, 2013 at 10:40
  • @DarrenCrabb, your suggestion doesn't work. The point is that there are two child-divs for each 'clickable' parent div and I want to alter specifically the one with class 'attr1', and not 'attr2'. Your method would bind a click handler to both 'attr1' and 'attr2'.
    – J-bob
    Sep 13, 2013 at 11:01

2 Answers 2

0

If you're hesitating to use the class attribute, why not try out Data Attributes.

Your code will then become:

function wasClicked(e){
   //just some magic so that 'clicked' references the whichever div was clicked
   $(this).children('[data-attr1]').css('background-color','blue')
}

Hope this helps.

0
$(".clickable").click(function (e){
    var clicked=this; // this is the magic
    ... //rest of your code
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.