Home/ Questions/Q 8716091
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T05:59:33+00:00

For example I have simple html. <body> <div class=a> <div class=child></div> <!– div element

  • 0

For example I have simple html.

<body>
    <div class="a">
        <div class="child"></div> <!-- div element I click -->
        <div class="childINeedToSelect"></div> <!-- div element I need to be selected -->
        <div class="child"></div>
    </div>
    <div class="a">
        <div class="child"></div>
        <div class="childINeedToSelect"></div>
        <div class="child"></div>
    </div>
</body>

When I click on top first child class div I need to change, for example, border ONLY of the first childINeedToSelect class div. They have the same parent – a class div, but the difficult is that there are more than just one element with class a. I’ve already tried:

$(document).ready(function () {
    var child = $('.child');
    child.bind('click', function() {
        detectElement($(this));
    });
});

var belt;
function detectElement(arrow) {
    belt = arrow.parent('.a').children('childINeedToSelect').eq(1);
    belt.css("background-color", "red");
}

As you see I’m trying to send $(this) as parameter to detectElement() to determine which div was clicked. But my target div background doesn’t change, and when I try to use element belt later, after it was detected by detectElement() function, Opera javascript debugger gives me error 

Unhandled Error: Cannot convert 'belt.css('marginLeft')' to object

in line 

var currentMargin = parseInt(belt.css('marginLeft').toString().replace('px', ''));

but this line of code worked perfectly, before calling detectElement() function; What am I doing wrong? How should I select element I need?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’d suggest:

    function detectElement(arrow) {
    arrow.parent().find('.childINeedToSelect').css('background-color','red');
}

$(document).ready(function(){
    $('.child').click(function(){
        detectElement($(this));
    });
});

    JS Fiddle demo.

    Or you could use the nextAll() method to find the sibling childINeedToSelect:

    function detectElement(arrow) {
    arrow.nextAll('.childINeedToSelect').css('background-color','red');
}

    JS Fiddle demo.

    And if you should have multiple .child and childINeedToSelect elements, you can pass the :first selector into the nextAll() method:

    function detectElement(arrow) {
    arrow.nextAll('.childINeedToSelect:first').css('background-color','red');
}

    JS Fiddle demo.

    I’m unsure why you were using bind(), but on the off-chance that you might be trying to account for dynamically-added elements (added after the event-handlers are bound to the various DOM nodes/jQuery objects), you could instead use on():

    $('.a').on('click','.child', function(){
    detectElement($(this));
});

    JS Fiddle demo.

    References:

    • 0