Question

我正在研究MVC 5项目，在那里我必须展示这一点，电气＆gt;照明＆gt;关于每次点击，HT＆amp; LT .. 到idSearch-item div。

示例：如果用户点击照明，则显示为电气＆gt;点亮或者甚至点击 HT＆amp; LT 然后显示电气＆gt;照明＆gt; HT＆amp; 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

您可以使用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 2

获取当前点击元素的索引

$(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 3

您可以使用jQuery＆＃39; 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();
        });
    });

如何针对特定选择获取每个“li”和“a”元素文本？

3 个答案: