Targeting a div with the right selector

Question

My HTML:

<tr class="main">
    <td class="dropdown">
        <a href="#">
            <div class="dropdown-image"></div>
        </a>
    </td>
    <td class="from">from</td>
    <td class="subject">subject</td>
    <td class="received">received</td>
    <td class="status">Quarantined</td>
    <td class="action">
        <a href="#">
            <div class="dropdown-menu"></div>
        </a>
    </td>
</tr>

I am trying to target the .dropdown-menu to change it's background image once the .dropdown-image has been clicked.

My JavaScript:

$(function) {
    $('.dropdown-image').click(function() {
        var clicks = $(this).data('clicks');
        var td = $(this).parent().parent();
        var tr = $(this).parent().parent().parent();

        if (clicks) {
            td.closest('.action').child().child().css("background-image", "url(images/new-arrow.png)");
        } else {
            td.closest('.action').child().child().css("background-image", "url(images/new-arrow-blue.png)");
        }
        $(this).data("clicks", !clicks);
    });
});

However, this doesn't work. How can I target the .dropdown-menu correctly?

what about syntax error there : `$(this).data("clicks, !clicks);` ? — Ali MasudianPour, Jan 05 '15 at 00:36
Those ``s need some sort of text content for screen reader accessibility. Something like `aria-label="toggle menu"` is one way to fix the issue. — danielnixon, Jan 05 '15 at 00:36
The JavaScript click handler should be on the ``, not on the `
` (for keyboard accessibility). Also consider replacing the ``s with ` — danielnixon, Jan 05 '15 at 00:38
@danielnixon what on earth is aria-lebelling? I think i went with the div only because when i wrote my css and put the class on the a link the css attributes wouldnt work but will look at changing this thanks! — charlotteg, Jan 05 '15 at 00:42
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute — danielnixon, Jan 05 '15 at 00:43
http://stackoverflow.com/questions/14914372/registering-jquery-click-first-and-second-click @AliMasudianPour this is just my bad retyping! i have not copy and pasted, it is all fine on my real code! — charlotteg, Jan 05 '15 at 00:44
@danielnixon every time i move the class to the a link, the a shows up as 0px x 0px no matter what i set it as, im doing something wrong do you know what that is? — charlotteg, Jan 05 '15 at 00:54

nnnnnn · Accepted Answer · 2015-01-05T00:40:41.223

You seem to be trying to use the .closest() method to find the sibling '.action' element, but that's not what .closest() does. As explained in the doco, it looks for a matching ancestor element. So you can get the tr element that the clicked div belongs to like this:

var tr = $(this).closest("tr");

And then you can find the dropdown-menu div that belongs in that tr using .find() method - which is like the opposite of .closest() in that it looks for a descendant:

tr.find(".dropdown-menu")

In other words, to find the related .dropdown-menu, navigate up to the tr with .closest() and then back down to the related div with .find().

$(function() {
    $('.dropdown-image').click(function() {
        var $this = $(this),
            clicks = $this.data('clicks'),
            $relatedDiv = $this.closest("tr").find(".dropdown-menu");

        if (clicks) {
            $relatedDiv.css("background-image", "url(images/new-arrow.png)");
        } else {
            $relatedDiv.css("background-image", "url(images/new-arrow-blue.png)");
        }
        $this.data("clicks", !clicks);
    });
});

Note that I only call $(this) once, putting the result in a variable. This is more efficient.

Also, as has been pointed out in comments, you have two syntax errors:

the first line should be $(function() { (you have incorrect parentheses)
the third-last line is missing a " before the comma.

And there has a error in the first line. Should be `$(function() {` instead of `$(function){`. And another error in the `$this.data("clicks, !clicks);`, see that this line has no double quotes after clicks. — Iago, Jan 05 '15 at 00:38
That was just bad retyping on my part @IagoMelanias it is correct in my real code i just rewrote it here to simplify it! — charlotteg, Jan 05 '15 at 00:40
Ok, i just cited because someone can reuse this code for something else. — Iago, Jan 05 '15 at 00:43

score 0 · Answer 2 · answered Jan 05 '15 at 01:45

JS

 $(function () {
  $('.dropdown-image').click(function () {
    var $relatedDiv = $(this).parents('tr.main').find('.dropdown-menu');
    $relatedDiv.toggleClass('bg-image-new-arrow-blue');
    $relatedDiv.toggleClass('bg-image-new-arrow');
  });
});

css

 .bg-image-new-arrow{
    color: red;
    font-size: 12px;
    background: url(images/new-arrow.png) no-repeat;
  }
  .bg-image-new-arrow-blue{
    color: blue;
    font-size: 23px;
    background: url(images/new-arrow-blue.png) no-repeat;
  }

html

<table>
  <tr class="main">
    <td class="dropdown">
        <a href="#">
            <div class="dropdown-image">asasdasdd</div>
        </a>
    </td>
    <td class="from">from</td>
    <td class="subject">subject</td>
    <td class="received">received</td>
    <td class="status">Quarantined</td>
    <td class="action">
        <a href="#">
            <div class="dropdown-menu bg-image-new-arrow-blue">DropDown menu</div>
        </a>
    </td>
</tr>
</table>

The related is code-pen is in this link

Targeting a div with the right selector

2 Answers2