CODEWITHSUNDEEP
javascriptjqueryhtmldom
user4035
user4035

Reputation: 23729

JQuery: how to find element that lies after current element

Suppose, we have 2 checkboxes and 2 divs that follow the checkboxes:

enter image description here

<div class="wrapper">
    <input type="checkbox" name="checkbox1" checked="" />
</div>
<div class="border"></div>

<div class="wrapper">
    <input type="checkbox" name="checkbox2" checked="" />
</div>
<div class="border"></div>

My goal is to toggle the color of the appropriate "border" div, lying below the checkbox. The problem is, I don't know how to get the appropriate div. I tried this, but it doesn't work:

$('input[type="checkbox"]').change(
    function  ()
    {
        var div = $(this).find('div');//<-- ?

        if ($(this).checked)
        {
            div.css("border", "solid 2px blue");
        }
        else
        {
            div.css("border", "solid 2px black");
        }
    });

jsfiddle

Upvotes: 2

Views: 101

Answers (3)

Valijon
Valijon

Reputation: 13103

You need to take parent().next() as was mentioned in some answers...

Also, checkbox status was not valuated correctly.

Try this solution:

$('input[type="checkbox"]').change(
    function  () {
        var div = $(this).parent().next();

        if ($(this).is(":checked")) {
            div.css("border", "solid 2px blue");
        } else {
            div.css("border", "solid 2px black");
        }
    }
);

https://jsfiddle.net/gv3pqo2z/3/

Upvotes: 1

Josh Crozier
Josh Crozier

Reputation: 240908

The problem is that the .find() method will select any descendant elements.

Since the input element is self-closed and doesn't contain any descendant elements, nothing is selected with $(this).find('div').

You could select the parent div element, and then the immediately following element:

$(this).parent().next();

The above will select the immediate parent element. It may be safer using the .closest() method in order to select the ancestor .wrapper element (just in case nesting varies):

$(this).closest('.wrapper').next();

In addition, jQuery objects don't have a checked property, you should retrieve the checked property of the DOM element, therefore $(this).checked should be this.checked or you could simply use the .prop() method to retrieve the checked property from the DOM element in the jQuery object by using: $(this).prop('checked').

Updated Example

$('input[type="checkbox"]').on('change', function() {
  var div = $(this).closest('.wrapper').next();

  if (this.checked) {
    div.css("border", "solid 2px blue");
  } else {
    div.css("border", "solid 2px black");
  }
});

As a side note, I'd suggest simply toggling a class on the corresponding element instead:

Updated Example

.border.blue-border {
  border-color: blue;
}

$('input[type="checkbox"]').on('change', function() {
  $(this).closest('.wrapper').next().toggleClass('blue-border')
});

Upvotes: 3

Alon Eitan
Alon Eitan

Reputation: 12025

Change it to var div = $(this).parent().next('.border');

Upvotes: 1

Related Questions