CODEWITHSUNDEEP
javascriptjquery
Adrian Panaintescu
Adrian Panaintescu

Reputation: 59

How to select just the parent on jquery?

I want to select only the element li with class options or level in jquery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="root-head">
  <ul>
      <li class="level" name="name1">main</li>
      <li class="level options" name="name2">
          sub1
          <ul class="option-selector lv1">
                  <li value="1">option1</li>
                  <li value="2">option2</li>
                  <li value="3">option2</li>
                  <li value="4">option3</li>
                  <li value="5">option4</li>
                  <li value="6">option5</li>

          </ul>
      </li>
      <li class="level options betimes" name="name3">
          sub2
      </li>
      <li class="level options betimes" name="name4">
          sub3
      </li>
  </ul>
</div>

How can make the function below called only then I click on sub1 text, not all of the li element like <li value="1">option1</li>

$("li[name=name2]").click(function () {
            console.log("Funtion called");
            if (/*suplimentary condition*/) {
                console.log("Yes is here");
            }
        });

Maybe is useful the last my question!

Upvotes: 0

Views: 75

Answers (3)

Mark Baijens
Mark Baijens

Reputation: 13222

You can check if event.target is the same as this.

  • event.target will be the actually clicked element.
  • this will be the element the click function is bound too.

According to the jquery docs it's a proper method of detecting event bubbling.

$("li[name=name2]").click(function(e) {
  if (e.target === this) {
    console.log("sub clicked");
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="root-head">
  <ul>
    <li class="level" name="name1">main</li>
    <li class="level options" name="name2">
      sub1
      <ul class="option-selector lv1">
        <li value="1">option1</li>
        <li value="2">option2</li>
        <li value="3">option2</li>
        <li value="4">option3</li>
        <li value="5">option4</li>
        <li value="6">option5</li>

      </ul>
    </li>
    <li class="level options betimes" name="name3">
      sub2
    </li>
    <li class="level options betimes" name="name4">
      sub3
    </li>
  </ul>
</div>

Upvotes: 2

David Bray
David Bray

Reputation: 586

be more specific - give the target some uniqueness in the dom

<li class="level options" name="name2">
    <div>sub1</div>
    <ul class="option-selector lv1">
        <li value="1">option1</li>
        <li value="2">option2</li>
        <li value="3">option2</li>
        <li value="4">option3</li>
        <li value="5">option4</li>
        <li value="6">option5</li>
    </ul>
</li>


$('li[name="name2"] > div').click(function () {
    console.log("Funtion called");
    if (/*suplimentary condition*/) {
        console.log("Yes is here");
    }

});

Upvotes: 1

Andam
Andam

Reputation: 2167

You have to stop the event propagation in the child li click event 

$(".level").click(function () {
    console.log("Funtion called");
});

$(".level ul").click(function (e) {
    e.stopPropagation();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="root-head">
  <ul>
      <li class="level" name="name1">main</li>
      <li class="level options" name="name2">
          sub1
          <ul class="option-selector lv1">
                  <li value="1">option1</li>
                  <li value="2">option2</li>
                  <li value="3">option2</li>
                  <li value="4">option3</li>
                  <li value="5">option4</li>
                  <li value="6">option5</li>

          </ul>
      </li>
      <li class="level options betimes" name="name3">
          sub2
      </li>
      <li class="level options betimes" name="name4">
          sub3
      </li>
  </ul>
</div>

Upvotes: 2

Related Questions