我怎樣才能得到每個'li'和'a'元素文本關於精選的選擇？

Question

我正在開發MVC 5項目，我必須展示這個，電氣>燈光> HT & LT ..到idSearch-item div關於每次點擊。

示例：如果上照明用戶點擊，則顯示像電氣>照明或即使點擊HT & LT然後顯示像電氣>照明> HT & LT這樣。

這裏是HTML，

<li class="col-sm-3"> 
 
    <ul> 
 
     <li class="dropdown-header">Electrical<input type="hidden" value="28"></li> 
 
     <li> 
 
      <a href="#">Lighting</a> 
 
      <input type="hidden" value="29"> 
 
     </li> 
 
     <li> 
 
      <a href="#">HT &amp; LT</a> 
 
      <input type="hidden" value="30"> 
 
     </li>  
 
    </ul> 
 
</li>

我曾嘗試下面的腳本代碼，

$("li a").each(function() { 
 
     $(this).click(function() { 
 
      document.getElementById("idSearch-item").innerHTML = '<ul class="breadcrumb"><li><a href="#">' + $(this).text() + '</a></li><li>' + $(this).text() + '</li></ul>'; 
 
      $('#idSearch-item').show(); 
 
     }); 
 
    });

<div class="row" style="display:none;padding:0 0 20px 0;float: left;" id="idSearch-item">    
 
      </div>

但是現在出這個樣子，

但我想看到這個樣子，

我怎樣才能做到這一點？請幫我...

Answer 1

書面獲取當前點擊的元素的索引

$(this).parent().index()我們希望得到li指數，所以既然我們點擊了a我們需要用.parent()來選擇我們的li

然後在此之前，所有的元素添加到您的麪包屑

$("li a").click(function() { 
 
    var bc = '<ul class="breadcrumb">'; 
 

 
    var index = $(this).parent().index(); 
 
    $(this).closest("ul").find("li").each(function(i, x) { 
 
    if (i < index) { 
 
     bc += '<li><a href="#">' + $(x).text() + '</a></li>'; 
 
    } 
 
    }) 
 

 
    bc += '<li>' + $(this).text() + '</li></ul>'; 
 
    $('#idSearch-item').html(bc).show(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row" style="display:none;padding:0 0 20px 0;float: left;" id="idSearch-item"> 
 
</div> 
 
<br><br> 
 
<br><br> 
 
<br><br> 
 
<br><br> 
 
<ul> 
 
    <li class="dropdown-header">Electrical<input type="hidden" value="28"></li> 
 
    <li> 
 
    <a href="#">Lighting</a> 
 
    <input type="hidden" value="29"> 
 
    </li> 
 
    <li> 
 
    <a href="#">HT &amp; LT</a> 
 
    <input type="hidden" value="30"> 
 
    </li> 
 
</ul>

Answer 2

您可以使用jQuery的prevAll()：

$("li a").click(function() { 
    var breadcrumbs = [$(this).text()]; 
    var previous = $(this).parent().prevAll("li"); 
    previous.each(function(el) { 
     breadcrumbs.push($(el).find("a").text()); 
    }); 

    var breadcrumbHtml = $("<ul class='breadcrumb'></ul>"); 
    breadcrumbs.reverse().each(function(item) { 
     breadcrumbHtml.append("<li><a href='#'>" + item + "</a></li>"); 
    }); 

    $("#idSearch-item").html(breadcrumbHtml); 
    $('#idSearch-item').show(); 
}); 

注：從我的頭頂，沒有測試

Answer 3

您可以使用jQuery的prevAll讓所有先前裏的。 這裏是一個工作的jsfiddle：https://jsfiddle.net/t0cjxrns/1/

HTML

<div id="idSearch-item"></div> 
<li class="col-sm-3"> 
    <ul> 
     <li class="dropdown-header">Electrical<input type="hidden" value="28"></li> 
     <li> 
      <a href="#">Lighting</a> 
      <input type="hidden" value="29"> 
     </li> 
     <li> 
      <a href="#">HT &amp; LT</a> 
      <input type="hidden" value="30"> 
     </li>  
    </ul> 
</li> 

的Javascript

$("li a").each(function() { 
     $(this).click(function() { 
      var $this = $(this); 
      //build breadcrumb html 
      var $breadcrumb = $('<ul class="breadcrumb">'); 

      //add all previous li items to the selection 
      $this.add($this.parent("li").prevAll("li")).each(function() { 
      //iterate each item in the selection and build an li for the breadcrumb 
      $breadcrumb.append('<li><a href="#">' + $(this).text() + '</a></li>'); 
      }); 

      var $idSearchItem = $("#idSearch-item"); 
      //set the html of the idSearch-item (jQuery way) and show it 
      $idSearchItem.html($breadcrumb); 
      $idSearchItem.show(); 
     }); 
    });