dcnfsr dcnfsr - 5 months ago 25
Javascript Question

jQuery find element using .contains() and select even lines in .relatives()

I've got a question on using jQuery selectors together to target a child < ul>





I've got a couple of panels with information in them but without specific ID -

  • So i'm trying to select each panel by finding a word in its title using .contains()

  • and then trying to select all the subsequent < li> and colour the even rows a specific colour, different for each panel.





    so far I have the below jQuery but am not getting the desired result... I'm fairly sure I need help with the .parent().closest() part of my statement to select the lines?



    jQuery(".panel-heading:contains('Microlights')").parent().closest(".pbytax-list li:nth-child(even)").css("background-color", "green");

    jQuery(".panel-heading:contains('Fixed Wing')").parent().closest(".pbytax-list li:nth-child(even)").css("background-color", "blue");

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="panel panel-default">
    <div class="panel-heading">Latest: Microlights &amp; SSDR&nbsp;
    </div>
    <div class="panel-body widget">
    <div class="pbytax-intro">
    </div>
    <ul class="pbytax-list">
    <li class="pbytax-item">xxx
    </li>
    <li class="pbytax-item">yyy
    </li>
    <li class="pbytax-item">zzz
    </li>
    <li class="pbytax-item">xxx
    </li>
    </ul>
    </div>
    </div>

    <div class="panel panel-default">
    <div class="panel-heading">Latest: Fixed Wing Land Plane (Group A)&nbsp;
    </div>
    <div class="panel-body widget">
    <div class="pbytax-intro">
    </div>
    <ul class="pbytax-list">
    <li class="pbytax-item">xxx
    </li>
    <li class="pbytax-item">yyy
    </li>
    <li class="pbytax-item">zzz
    </li>
    <li class="pbytax-item">xxx
    </li>
    </ul>
    </div>
    </div>






    Latest: Microlights & SSDR 


















  • Latest: Fixed Wing Land Plane (Group A) 
















    Answer

    Using find instead of closest works.

    The .closest selector traverses up the DOM to find the parent that matches the conditions.

    The .find selector traverses down the DOM where the event occurred, that matches the conditions.

    $(document).ready(function() {
    
      $(".panel-heading:contains('Microlights')").parent().find(".pbytax-list li:nth-child(even)").css("background-color", "green");
    
    $(".panel-heading:contains('Fixed Wing')").parent().find(".pbytax-list li:nth-child(even)").css("background-color", "blue");
      
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="panel panel-default">
      <div class="panel-heading">Latest: Microlights &amp; SSDR&nbsp;
      </div>
      <div class="panel-body widget">
        <div class="pbytax-intro">
        </div>
        <ul class="pbytax-list">
          <li class="pbytax-item">xxx
          </li>
          <li class="pbytax-item">yyy
          </li>
          <li class="pbytax-item">zzz
          </li>
          <li class="pbytax-item">xxx
          </li>
        </ul>
      </div>
    </div>
    
    <div class="panel panel-default">
      <div class="panel-heading">Latest: Fixed Wing Land Plane (Group A)&nbsp;
      </div>
      <div class="panel-body widget">
        <div class="pbytax-intro">
        </div>
        <ul class="pbytax-list">
          <li class="pbytax-item">xxx
          </li>
          <li class="pbytax-item">yyy
          </li>
          <li class="pbytax-item">zzz
          </li>
          <li class="pbytax-item">xxx
          </li>
        </ul>
      </div>
    </div>