How to select a certain element with Jquery/Javascript

Question

I am currently dabbling with Jquery/Javascript and manipulating a DOM Tree/elements.

I have a few parent elements which are LI's and the children are nested inside using a UL as can be seen in the html code below.

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

How would one go about highlighting/selecting each element individually? What I mean is when I click one of the elements e.g Child 1 it would become the selected and then place something there to show it's selected i.e border:dashed

The overall aim was to manipulate the data so that when I select one of the elements, again, lets say Child 1 I could have code on a button that will get the selected element and add another child to it's family or under the parent node.

I understand my question may sound vague so I have attached an image with a (very shabbily made) mock-up of what I mean. If there are any other pieces of info needed just let me know.

Mock-up

@BhojendraNepal Just the basics really, can't really say a huge amount more than that, I can do all the usual getElementByID/TagName etc and have done things like reposition items in a list using a temp array — JasonL95
– JasonL95, Commented Mar 25, 2016 at 3:24
don't you need to add <li></li> tags to the contents of your child ul's and then when you click on a given li, it can be given the active class and styling? — gavgrif
– gavgrif, Commented Mar 25, 2016 at 3:43

Kyle · Accepted Answer · 2016-03-25 03:43:06Z

2

Not sure if I understand the question, but does this solve your problem? Start by giving each ul tag you want to be selectable a class.

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

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

then you could have css for the selected class

.selected {
  border: dashed 1px black;
}

like this:

$('.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>

edited Mar 25, 2016 at 3:43

answered Mar 25, 2016 at 3:28

Kyle

4032 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

JasonL95 Over a year ago

Hi, thanks for answering :) The selected is highlighting everything in the Tree eg it seems to be highlighting the entire DIV. The add is adding a new element BUT deleting the existing tree :(

Kyle Over a year ago

try giving the selectable ul tags a class. I've updated the answer. Let me know if that works.

JasonL95 Over a year ago

Apologies, I just seen your edit, the highlighting works now but as I said above the add is just adding 1 new element while deleting the existing tree

Kyle Over a year ago

I don't seem to be getting the deleting the existing tree issue. I've attached a code snippet, make sure that everything looks like what you have.

Collectives™ on Stack Overflow

How to select a certain element with Jquery/Javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related