jQuery: Click select Previous / Closest div with selector

Question

I’ve being sitting for some while trying to solve a issue which I’m certain is quite simple but it just can’t get it to work.

I got this HTML:

<div class="span4">
    <div id="content" class="col-1"></div>
  <div class="add">
    <div class="dropdown btn-group">
        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
            Add element
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu" id="addToColumn" data-col="1">
            <li><a href="#" id="headline">Headline</a></li>
            <li><a href="#" id="file">File</a></li>
            <li><a href="#" id="linebreak">Linebreak</a></li>
        </ul>
    </div>
  </div>
</div>

this is wrapped inside a div (class=row) which is again wrapped inside another div (class=container).

Now, when I press either of the three links (Headline, File or Linebreak) I have some JS to do some ajax and then insert some content in the empty div content.

But for the life of me I just can’t select the div.

I should mention, that the block of code is repeated three times, so I have three columns which each contain same dropdown menu with same three links and I want to make it as flexible as possible (before I used some different data-? attributes, but I want to use as few of those if possible).

My JS code looks something like this right now:

$("#addToColumn li a").click(function() {
    var elementType = $(this).attr('id');

// I’ve tried this but with no luck:
var col = $(this).closest("div#content");
    // AND
    var col = $(this).prev("div#content");
}

There are something which confuses me with this DOM tree. I want want each of the dropdown menus to insert something in the right wrapper-div for the right column and I want to try to do it without the use of some numeric “ID’s” but just select the “closest” content div and insert the data in this.

How do I go about doing that?

Any help if very appreciated

-Cheers

Answer 1

You can only have 1 element having id="content". having more than one is invalid and can cause unexpected behaviour. the rest of the code seems about right. if you change your id to class the following should work: var col = $(this).parents(".row").find(".content");. Same goes for id="addToColumn", id is meant to be unique - use classes instead.

Answer 2

I think you could try

var col = $(this).closest("div.add").prev();

Answer 3

You could use the parents() function from jquery and then traverse back down. Although Yotam is more correct, id's should be unique.

Like this fiddle: http://jsfiddle.net/WHSpU/

$(this).parents(".row").find("#content").first().append('some stuff');

Answer 4

HTML

   <div class="span4">
      <div class="content"></div>
      <div class="add">
        <div class="dropdown btn-group">
            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                Add element
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu addToColumn" data-col="1">
                <li><a href="#" class="headline">Headline</a></li>
                <li><a href="#" class="file">File</a></li>
                <li><a href="#" class="linebreak">Linebreak</a></li>
            </ul>
        </div>
      </div>
    </div>
    <div class="span4">
      <div class="content"></div>
      <div class="add">
        <div class="dropdown btn-group">
            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                Add element
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu addToColumn" data-col="2">
                <li><a href="#" class="headline">Headline</a></li>
                <li><a href="#" class="file">File</a></li>
                <li><a href="#" class="linebreak">Linebreak</a></li>
            </ul>
        </div>
      </div>
    </div>
    <div class="span4">
      <div class="content"></div>
      <div class="add">
        <div class="dropdown btn-group">
            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                Add element
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu addToColumn" data-col="3">
                <li><a href="#" class="headline">Headline</a></li>
                <li><a href="#" class="file">File</a></li>
                <li><a href="#" class="linebreak">Linebreak</a></li>
            </ul>
        </div>
      </div>
    </div>

Javascript

    $(".addToColumn li a").on('click', function(e) {
        e.preventDefault();
        var myContentDiv = $(this).closest('.content');
        myContentDiv.load(myData);
    }

Answer 5

Since #content is not a parent of the a and .prev() is only for siblings, you need to get the closest parent who is the sibling of #content like that :

$(this).closest(".add").prev();