Question

I’ve been searching for a very long time without any luck within the subject, please point me in the right direction if I have been missing an older thread.

What I’m trying to achieve:

Having a regular view of multiple nodes and by pressing a button (or whatever) within a node make jQuery interact with this specific node in any way. Ex. make a hidden div appear.

The problems I’m facing are for starters that I’m still finding it hard to work with jQuery together with D7. I’ve been using jQ for a very long time before but when using it together with D7 I’m facing major problems.

And the biggest problem … is that once I get the jQ to work it effects every visible node in the list/feed since im calling the function via a div id or a class. I understand why this is happening but what i can’t figure out is how to get the jQ to make an impact only on the node in which the button is being pressed.

This is what i have so far within my node-template for a specific content-type:

    <script type="text/javascript">                                         
(function ($) {

 $('.up2').click(function () {
        $('.nummer_dark').text(parseInt($('.nummer_dark').text())+1,0).toFixed(2);
   $('.up2').toggle();


      });

       $('.up').one('click', function() {
        $('.flag-link-toggle').click();once();


      });


})(jQuery);

 </script> 

This is just an example where I’m trying to increase the number within a span by pressing an object with the up2-class and toggle a flag by pressing an object with the up-class.

The first code works but the number is increased with decimals ( 2.453, 3.4123 etc) instead of just 1,2,3,4 as i planned. But the main problem is that these both codes are giving effect on every node in the list.. I know this is because every node in the list have the same node-template and thus the same classes but i want to find a solution using the node-id in the jQ.

Any leading answers would save my day! =)

Answer 1

I would make use of the .closest() and .find() methods. This will allow you to locate just the parent node containing the button that was just clicked so you can find and change just the child element of that node. Here is some quick psuedo code showing how it would work.

$('.up2').click(function() {
    $(this).closest('.node').find('.nummer_dark').text();
}