对于特定的选择，我如何获得每个“li”和“a”元素文本？

Question

我是在MVC 5项目上工作，在这里我必须展示一下，电气>照明>HT<.到idSearch-item div的每一次点击。

例子:如果用户点击照明，那么显示喜欢电气>照明，或者即使点击HT<，也会显示喜欢电气>照明> HT<那样。

​

​

这是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来获取所有之前的li。

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();
        });
    });