使用jQuery進行DOM遍歷

Question

我正在嘗試創建一個比較覆蓋圖，以顯示用戶在“添加以進行比較”鏈接時選擇的項目。（例如，在點擊添加進行比較時， flipkart中的項目會顯示在頂部）。 這是我的代碼：

<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> 

Java腳本

/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);

  });

我希望將包含類“ image-header”的div中的文本分配給變量clgId。 我的代碼面臨的問題是它正在添加所有包含類“ image-header”的div的文本。 例如，我希望在單擊添加時將值text1賦值，以比較ID為text1的div。 但是，它將“ text1 text2 text3”分配給clgId。

請幫忙

Answer 1

我創建了一個JSFiddle，它具有您想要的功能（我在clgId變量的腳本中包括了控制台日志輸出）：

http://jsfiddle.net/py38kuvv/

我用closest函數替換了parentsUntil函數（並替換了individual-clg-container類選擇器）：

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

並更新了您的點擊處理程序：

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

為了將來能夠更快地做出響應，請將您到目前為止所擁有的內容發布到JSFiddle中，這樣其他人可以更輕松地進行幫助:)

Answer 2

它正在添加所有這些，因為

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

應該

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