Question

我想创建一个带有无序列表的可扩展树。在我的情况下，深度不受限制。我必须将文本保留在列表元素中，这样我需要为每个父项添加一个额外的span元素以获得可点击的项目。

我尝试使用jQuery添加此span标记，这会找到li对象，但在结果中只有第一个出现可见。

HTML代码就是这样。

<ul class="list">
<li>
  Categories
  <ul>
      <li>
        Parent
        <ul>
          <li><a href="page.html#11">link 1</a> <a href="page.html#12">link 2</a> <a href="page.html#13">link 3</a></li>
          <li><a href="page.html#21">link 1</a> <a href="page.html#22">link 2</a> <a href="page.html#23">link 3</a></li>
        </ul>
      </li>  
      <li>
        Parent
        <ul>
          <li><a>Child 1</a></li>
          <li><a>Child 2</a></li>
          <li><a>Child 3</a></li>
        </ul>
      </li>  
  </ul>                
</li>
</ul>

我的jQuery脚本如下。

$(document).ready(function(){
    $(".list").each(function () {
        $(this).find('li').each(function(index, element){
            var text = $(this).html();
            text = "<span class=\"trigger\">+</span> " + text;
            $(element).html(text);
        });
    });

    $('.list > li span').click(function(){
        $(this).parent().children('ul').toggle();
        if($(this).text() == '+') {
            $(this).text('-');
        }
        else {
            $(this).text('+');
        }
    });
});

jsFiddle：https://jsfiddle.net/pegapega/2f20s90v/

我的预期结果将是每个li元素：

<li><span class="trigger">+</span>[original content]</li>

为什么没有将span元素添加到所有li元素？

Answer 1

我不确定为什么你的代码示例不起作用，但是这里有一个基于你原创的例子。

    $('li').each(function(i, e){
      $(e).prepend('<span class="trigger">+</span>');
    });
	
    $('span').on('click', function(e){
        $(e.target).next('ul').toggleClass('show');
        if( $(e.target).text() == '+') {
        	$(e.target).text('-');
        } else {
        	$(e.target).text('+');
        }
    });

span.trigger {
  cursor: pointer;
}
ul {
	display: none;
  list-style-type: none;
  padding-left: 30px;
  font-size: 18px;
  font-family: "Open Sans", sans-serif;
}
ul.show {
  display: block;
}

ul.list {
	display: inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
	<li>
	  Root
	  <ul>
		  <li>
			Parent
			<ul>
			  <li><a href="page.html#11">link 1</a> <a href="page.html#12">link 2</a> <a href="page.html#13">link 3</a></li>
			  <li><a href="page.html#21">link 1</a> <a href="page.html#22">link 2</a> <a href="page.html#23">link 3</a></li>
			</ul>
		  </li>  
		  <li>
			Parent
			<ul>
			  <li><a>Child 1</a></li>
			  <li><a>Child 2</a></li>
			  <li><a>Child 3</a></li>
			</ul>
		  </li>  
	  </ul>                
	</li>
</ul>

Stackoverflows片段编辑器似乎在toggle（）方面遇到了一些问题，所以我只是用toggleClass（）替换它，这样就可以了。

jQuery使用带有额外span标记的ul li创建一个可扩展的无序列表

1 个答案: