CODEWITHSUNDEEP
jquery
lashja
lashja

Reputation: 493

How can I get each 'li' and 'a' elements text with respect to particular selection?

I am working on MVC 5 project, there I have to show this, Electrical > Lighting > HT&LT.. to idSearch-item div with respect to each click.

Example: If the user click on Lighting, then show like Electrical > Lighting or even if click on HT&LT then show like Electrical > Lighting > HT&LT like that.

enter image description here

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

I have tried below script code,

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

But now showing like this,

enter image description here

But I want see like this,

enter image description here

How can I do this?

Upvotes: 1

Views: 541

Answers (3)

devqon
devqon

Reputation: 13997

You can use jquery's 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();
});

Note: written from the top of my head, not tested

Upvotes: 1

Daniel Z.
Daniel Z.

Reputation: 3348

You can use jQuery's prevAll to get all previous li's. Here is a working 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();
        });
    });

Upvotes: 1

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

Get the index of the current clicked element

$(this).parent().index() We want to get the li index, so since we clicked on a we need to use .parent() to select our li

Then add all elements before that to your breadcrumbs

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

Upvotes: 1

Related Questions