1

Возникла у меня небольшая проблема с оформлением. Я не понимаю как вставить кнопки перед ul списком. У меня они появляться в каждом ul списке, а мне нужно что бы они были вне него. Пробовал создавать еще одну переменную с кнопками, но чего-то не выходило... Помогите пожалуйста исправить проблему.

var listCategories = {
  data: [

    {
      itemId: 1,
      itemName: "пункт №1",
      itemParentId: 0,
      deleteInputId: 'd_1',
      addInputId: 'a_1',
      liId: 'l_1'
    },

    {
      itemId: 2,
      itemName: "пункт №1.1",
      itemParentId: '1',
      deleteInputId: 'd_2',
      addInputId: 'a_2',
      liId: 'l_2'
    },

    {
      itemId: 3,
      itemName: "пункт №1.2",
      itemParentId: 1,
      deleteInputId: 'd_3',
      addInputId: 'a_3',
      liId: 'l_3'
    },

    {
      itemId: 4,
      itemName: "пункт №2",
      itemParentId: 0,
      deleteInputId: 'd_4',
      addInputId: 'a_4',
      liId: 'l_4'
    },

    {
      itemId: 5,
      itemName: "пункт №3",
      itemParentId: 0,
      deleteInputId: 'd_5',
      addInputId: 'a_5',
      liId: 'l_5'
    },

    {
      itemId: 6,
      itemName: "пункт №3.1",
      itemParentId: 5,
      deleteInputId: 'd_6',
      addInputId: 'a_6',
      liId: 'l_6'
    },

    {
      itemId: 7,
      itemName: "пункт №3.2",
      itemParentId: 5,
      deleteInputId: 'd_7',
      addInputId: 'a_7',
      liId: 'l_7'
    },

    {
      itemId: 8,
      itemName: "пункт №3.3",
      itemParentId: 5,
      deleteInputId: 'd_8',
      addInputId: 'a_8',
      liId: 'l_8'
    },

    {
      itemId: 9,
      itemName: "пункт №4",
      itemParentId: 0,
      deleteInputId: 'd_9',
      addInputId: 'a_9',
      liId: 'l_9'
    },

    {
      itemId: 10,
      itemName: "пункт №5",
      itemParentId: 0,
      deleteInputId: 'd_10',
      addInputId: 'a_10',
      liId: 'l_10'
    },

    {
      itemId: 11,
      itemName: "пункт №5.1",
      itemParentId: 10,
      deleteInputId: 'd_11',
      addInputId: 'a_11',
      liId: 'l_11'
    }

  ]
}
function createTree(data, parentId) {
  parentId = parentId || 0;
  var items = data.filter(function(el) {
    return el.itemParentId == parentId;
  });
  if (items.length == 0) return null;
  var tree = $('<ul>').addClass('tree').prepend($
    ('<input type="button" id="deleteBranch" value="Delete">')
  ).prepend(
    $('<input type="button" id="addBranch" value="Add">')
  );
  tree.append(
    items.map(
      function(el) {

        var li = $('<li>').append(
            $('<input>').attr({type: 'checkbox', id: el.deleteInputId})
          ).append(
            $('<label>').html(el.itemName).attr({id: el.itemId, for: el.deleteInputId}).addClass('item')
          ).append(
            $('<a>').addClass('state')
          ).attr({id: el.liId}),
          nestedTree = createTree(data, el.itemId);
        if (nestedTree !== null) {
          li.append(nestedTree)
            .addClass('collapse');
        }
        return li;
      }
    )
  );
  return tree;
}

$(document).ready(function() {
  var tree = createTree(listCategories.data);

  $('#tree').append(tree)
            .on('dblclick', '.item',function(){
                $(this).attr("contenteditable", "true");
            })

            .on('click', '.item',function(){
                $('.active').not(this).removeClass('active');
                $(this).toggleClass('active');
            })

            .on('click', '.state',function(){
                $(this).parent().toggleClass('collapse expand');
            })

        

});
ul.tree {
  list-style-type: none;
  position: relative;
}
.active {
  background-color: orange;
}
.state {
  position: absolute;
  left: 1em;
}
.collapse > .state::after {
  content: '+';
}
.expand > .state::after {
  content: '-';
}
.collapse > ul {
  display: none;
}
.expand > ul {
  display: block;
}
.item {
  cursor: pointer;
}

#addBranch {
  margin: 0px 5px 25px -30px;
}

#deleteBranch {
  margin-left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tree"></div>

4
  • Не удивительно, у Вас же рекурсивная функция. Кнопки создаются каждый раз когда она вызыввается.
    – sepgg
    Commented 20 окт. 2016 в 7:35
  • @sepgg Я это понимаю
    – Mark
    Commented 20 окт. 2016 в 7:37
  • Ну создайте эти кнопки вне этой функции или вообще в самом html или нужно именно функционально?
    – sepgg
    Commented 20 окт. 2016 в 7:39
  • @sepgg Нужно именно функционально. Но спасибо, натолкнули на идею ;)
    – Mark
    Commented 20 окт. 2016 в 7:42

1 ответ 1

0

Вам нужно использовать .insertBefore() , a не .prepend() http://api.jquery.com/insertbefore/

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.