CODEWITHSUNDEEP
jquery
TooJuniorToCode
TooJuniorToCode

Reputation: 566

New on breadcrumb

Basically, this looks very easy, I followed this question and the solution.

I face some issues as I'm retrieving something from the database and using my own Standards on the UL LI elements.

My code :

<ol class="breadcrumb">
    <liclass="item"><a href="#home">Home / </a></li>
</ol>

<div class="items">
   <ul>
     <li><a href="#test1">Test 1</a></li>
     <li><a href="#test1">Test 2</a></li>
        <ul>
            <li><a href="">Level 1</a></li>
            <li><a href="">Level 2</a></li>
        </ul>
     <li><a href="#test1">Test 3</a></li>
  </ul>
</div>

$('.items a').on('click', function() {
  var $this = $(this),
  $bc = $('<div class="item"></div>');

  $this.parents('li').each(function(n, li) {
  var $a = $(li).children('a').clone();
  $bc.prepend(' / ', $a);
  });
    $('.breadcrumb').html( $bc.prepend('<a href="#home">Home</a>') );
    return false;
})

I'm seriously not really good at this. Appreciate if someone assists.

Upvotes: 1

Views: 376

Answers (4)

Naeem Shaikh
Naeem Shaikh

Reputation: 15725

http://jsfiddle.net/mPsez/335/

<ol class="breadcrumb">
    <li  class="item"><a href="#home">Home / </a></li>
</ol>

<div class="items">
   <ul>
     <li><a href="#test1">Test 1</a></li>
     <li><a href="#test2">Test 2</a>
        <ul>
            <li><a href="level1">Level 1</a></li>
            <li><a href="level2">Level 2</a>
          </li>
        </ul>
     </li>
     <li><a href="#test1">Test 3</a></li>
  </ul>
</div>

$('.items a').on('click', function() {
  var $this = $(this),
      $bc = $('<div class="item"></div>');

  $this.parents('li').each(function(n, li) {
      var $a = $(li).children('a').clone();
      $bc.prepend(' / ', $a);
  });
    $('.breadcrumb').html( $bc.prepend('<a href="#home">Home</a>') );
    return false;
})

Edit:

As the structure mentioned by op, UL doesnt lie within LI, so here is the updated fiddle http://jsfiddle.net/mPsez/338/

$('.items a').on('click', function() {
  var $this = $(this),
      $bc = $('<div class="item"></div>');

  $this.closest('li').each(function(n, li) {
      var $a = $(li).children('a').clone();
      $bc.prepend(' / ', $a);
  });
   $this.parents('ul').each(function(i,ul){

       var $li= $(ul).prev('li');

        var $a= $li.children('a').clone();

       if($a.text().length>0){
           $bc.prepend(' / ', $a);
       }
    });



    $('.breadcrumb').html( $bc.prepend('<a href="#home">Home</a>') );
    return false;
})

Upvotes: 2

user2010925
user2010925

Reputation:

If you wish to conserve your html syntax, you can use this code below:

$('.items a').on('click', function() {
  var $this = $(this),
  $bc = $('<div class="item"></div>');

  $this.parents('ul').each(function(n, ul) {
      if ( $(ul).prev('li').length > 0 ) {
          var $a = $(ul).prev('li').children('a').clone();
          $bc.prepend(' / ', $a);
      }
  });
    $bc.append(' / ', $this.clone());
    $('.breadcrumb').html( $bc.prepend('<a href="#home">Home</a>') );
    return false;
})

An example can be found here.

Upvotes: 1

elas
elas

Reputation: 815

To conserve your html syntax, use this code:

$('.items a').on('click', function() {
  var $this = $(this),
      $bc = $('<div class="item"></div>');
      $parent = $this.parent('li');

  var $a = $parent.children('a').clone();
  $bc.prepend(' / ', $a);  
  $parent.parents('li + ul').each(function(n, li) {
      console.log(li);
      var $a = $(li).prev().children('a').clone();
      $bc.prepend(' / ', $a);
  });
  $('.breadcrumb').html( $bc.prepend('<a href="#home">Home</a>') );
  return false;
})

It should always work if you keep each "ul" right after the corresponding "li"

http://jsfiddle.net/3ncwtan7/

Upvotes: 1

user2010925
user2010925

Reputation:

When in doubt, use console.log, and see the output by pressing F12 and going to the console tab (I'm in chrome).

After adding a console.log here:

$bc = $('<div class="item"></div>');
console.log($this.parents('li'));

I can see that $this.parents('li') doesn't have any parents. Basically, what this code is attempting to do is get every parent li, and adding breadcrumbs for each.

Try to see it like a path (For example the Level 1 anchor tag):

Level 1 > Parent is Li > Parent is Ul > Parent is Ul -> Parent is Div[class="items"]

Your code can't find any li parents, and therefore can't determine what levels are created. You're going to have to follow their html pattern to get this to work properly.

Upvotes: 1

Related Questions