如何使用Jquery / Javascript选择某个元素

Question

我目前正在使用Jquery / Javascript并操纵DOM树/元素。

我有一些LI的父元素，并且使用UL将子元素嵌套在内部，如下面的html代码所示。

<div class="TheList">
  <ul>
    <li class="theTop">Parent
      <ul>
        Child 1
      </ul>
      <ul>
        Child #2
      </ul>
    </li>    
    <li>Parent 2</li>
    <li>Parent 3
      <ul>
        Child 1
      </ul>
    </li>
  </ul>
</div>

如何单独突出显示/选择每个元素？我的意思是当我点击其中一个元素，例如Child 1，它将成为选中，然后放置一些东西以显示它被选中，即border：dashed

总体目标是操纵数据，以便当我选择其中一个元素时，再次，让我们说Child 1我可以在一个按钮上有代码，该按钮将获得所选元素并将另一个孩子添加到其家庭或父节点。

我理解我的问题可能听起来含糊不清，所以我附上了一张图片，上面写着（非常破旧的）模仿我的意思。如果还有其他任何信息，请告诉我。

Answer 1

不确定我是否理解这个问题，但是这会解决您的问题吗？ 首先，为每个ul标记添加一个类。

$('.selectable').click(function() {
    $(this).toggleClass('selected');
});

$('button').click(function() {
  $('.selected').parent().append('<ul></ul>');
});

然后你可以拥有selected类

的CSS

.selected {
  border: dashed 1px black;
}

像这样：

＆＃13;

＆＃13;

$('.selectable').click(function() {
    $(this).toggleClass('selected');
});

$('button').click(function() {
  $('.selected').parent().append('<ul>a</ul>');
});

＆＃13;

.selectable {
  border: solid 1px red;
}
.selected {
  border: dashed 1px black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <ul class="selectable">
      1
    </ul>
    <ul class="selectable">
      2
    </ul>
  </li>
  <li>
    <ul class="selectable">
      3
    </ul>
  </li>
</ul>
<button>Add Child</button>

＆＃13;

＆＃13;

＆＃13;