CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Rishit Shah
Rishit Shah

Reputation: 375

DOM traversing using jQuery

I am trying to create a comparison overlay that shows items selected by users when they 'add to compare' link.(like one in flipkart that appears on top when you hit add to compare). Here is my code:

<div class="college-list-container">
  <div class = "individual-college-container" id="text1">
    <div class="image-header"><h3>text1</h3>
    </div>
    <div class="dark-overlay">
      <a href=""><div class="overlay-links" style=" float:left;"> <div class="absolute-center ">Details</div></div></a>     
      <a href=""> <div class="overlay-links" style=" float:right; border-right:none;"> <div class="absolute-center comparison" id="comparison">Add to compare</div>
      </div></a>
    </div>       
  </div>
  <div class = "individual-college-container">
    <div class="image-header"><h3>text2</h3>
    </div>
    <div class="dark-overlay">
      <a href=""><div class="overlay-links" style=" float:left;"> <div class="absolute-center ">Details</div></div></a>     
      <a href=""> <div class="overlay-links" style=" float:right; border-right:none;"> <div class="absolute-center comparison">Add to             compare</div>
      </div></a>
    </div>       
  </div>

  <div class = "individual-college-container" id="itm">
    <div class="image-header" ><h3>text3</h3>
    </div>
      <div class="dark-overlay">
      <a href=""><div class="overlay-links" style=" float:left;"> <div class="absolute-center ">Details</div></div></a>     
      <a href=""> <div class="overlay-links" style=" float:right; border-right:none;"> <div class="absolute-center comparison">Add to             compare</div>
      </div></a>
    </div>

Javascript

/show overlay when one checkbox is checked and add its name/image to the empty space
  $('.comparison').click(function(e){
     var clgId = $(this).parentsUntil('.individual-clg-container').find('.image-header').text();
     e.preventDefault();
     var clg = $("<li></li>")
     clg.text(clgId);
     var removeLink = $("<a href=''>(Remove)</a>");
     clg.append(removeLink)
     $('.comparison-colleges').append(clg);
     $('.add-to-compare-overlay').show("slide", { direction: "up" }, 300);

  });

I want the text in the div containing class 'image-header' to be assigned to the variable clgId. The problem that i am facing with my code is that it is adding the text of all the divs containing class 'image-header'. Ex i want the value text1 to be assigned on clicking add to compare of the div with id text1. However it assigns 'text1 text2 text3' to clgId.

Please help

Upvotes: 0

Views: 71

Answers (2)

Alvin Pascoe
Alvin Pascoe

Reputation: 1209

I've created a JSFiddle with what I think is your desired functionality (I included a console log output in the script of the clgId variable):

http://jsfiddle.net/py38kuvv/

I replaced the parentsUntil function with the closest function (and replaced the individual-clg-container class selector):

var clgId = $(e.target).closest('.individual-college-container').find('.image-header').text();

and also updated your click handler:

$('.comparison').on( "click", function(e) {

In order to get a quicker response in future, posting a JSFiddle of what you have so far makes it easier for others to help :)

Upvotes: 1

stanley1943
stanley1943

Reputation: 877

It is adding all of them because 

var clgId = $(this).parentsUntil('.individual-clg-container').find('.image-header').text();

should be 

var clgId = $(this).parentsUntil('.individual-college-container').find('.image-header').text();

Upvotes: 0

Related Questions