javascript - 如何使用 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 我可以在按钮上编写代码，该按钮将获取所选元素并将另一个 child 添加到它的家庭或下父节点。

我知道我的问题听起来可能含糊不清，所以我附上了一张图片，其中包含我的意思的模型(非常破旧)。如果需要任何其他信息，请告诉我。

Answer 1

不确定我是否理解问题，但这是否解决了您的问题？首先为您希望可选择的每个 ul 标记指定一个类。

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

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

然后你可以为 selected 类设置 CSS

.selected {
  border: dashed 1px black;
}

像这样:

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

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

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

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