从多个li中选择相同的孩子

时间：2018-11-04 00:43:23

标签： jquery css

我已经从ul和li列表中构建了表格。我现在想通过更改所有行li的类来切换li“单元格”的类，但切换多个div中的同一个孩子，从而使行的样式成为行高。

  1. 单击所有列表中相同li子的li子更改类
  2. 在所有列表中相同li子的li子更改类的悬停上

影响点击和悬停时突出显示“行”。

请参阅下面的基本概述以了解内容。

我的代码 

$("#cell").hover(function() {
  (".cd-features-list li").addClass("cellHover");
});

$("#cell").click(function() {
  (".cd-features-list li").addClass("cellClick");
});
    .cellHover {
  background: #888;
  ) .cellClick {
    background: #111;
    )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cd-products-table">
  <div class="features">
    <div class="top-info">Models</div>
    <ul class="cd-features-list">
      <li>Programme Type</li>
      <li>Completion speed</li>
      <li>Visa Coverage</li>
      <li>Investment Type</li>
      <li>Min. Investment</li>
      <li>Family included</li>
      <li>Family entitlements</li>
      <li>PR time frame</li>
      <li>Citizenship time frame</li>
      <li>Annual min. stay</li>
    </ul>
  </div>
  <!-- .features -->

  <div class="cd-products-wrapper">
    <ul class="cd-products-columns">
      <li class="product">
        <div class="top-info">
          <img src="/images/flags/portugal-flag.svg" alt="product image" height="100" width="230">
          <h3>Portugal</h3>
          <br>
          <div class="check"></div>

        </div>
        <!-- .top-info -->

        <ul class="cd-features-list">
          <li>xxxxxxx</li>
          <li class="rate"><span>5/5</span></li>
          <li>xxxxxxx</li>
          <li>xxxxxxx</li>
          <li>xxxxxxx</li>
          <li>xxxxxxx</li>
          <li>xxxxxxx</li>
          <li>xxxxxxx</li>
          <li>xxxxxxx</li>
          <li>xxxxxxx</li>
          <li>xxxxxxx</li>
        </ul>
      </li>
      <!-- .product -->

      <li class="product">
        <div class="top-info">
          <img src="/images/flags/british-flag.svg" alt="product image" height="100" width="230">
          <h3>United Kingdom</h3>
          <br>
          <div class="check"></div>

        </div>
        <!-- .top-info -->

        <ul class="cd-features-list">
          <li>xxxxxxx</li>
          <li class="rate"><span>5/5</span></li>
          <li>xxxxxxx</li>
          <li>xxxxxxx</li>
          <li>xxxxxxxs</li>
          <li>xxxxxxx</li>
          <li>xxxxxxx</li>
          <li>xxxxxxx</li>
          <li>1 xxxxxxx</li>
          <li>3 xxxxxxx</li>
          <li>1 xxxxxxx</li>
        </ul>
      </li>
      <!-- .product -->

      <li class="product">
        <div class="top-info">
          <img src="/images/flags/cypriot-flag.svg" alt="product image" height="100" width="230">
          <h3>Cyprus</h3>
          <br>
          <div class="check"></div>

        </div>
        <!-- .top-info -->

        <ul class="cd-features-list">
          <li>xxxxxxx</li>
          <li class="rate"><span>5/5</span></li>
          <li>xxxxxxx</li>
          <li>xxxxxxx</li>
          <li> xxxxxxx</li>
          <li>xxxxxxx</li>
          <li>xxxxxxx</li>
          <li>xxxxxxx</li>
          <li>1 xxxxxxx</li>
          <li>3 xxxxxxx</li>
          <li>1 xxxxxxx</li>
        </ul>
      </li>
      <!-- .product -->

2 个答案:

答案 0 :(得分：1)

在这里jsfiddle 

$( ".cd-features-list > li" ).hover(
  function() { 
  var u=$(this).parent('ul');
   $(u).addClass("cellHover");
  }, function() {
   var u=$(this).parent('ul');
   $(u).removeClass("cellHover");
   
  }
);

$( ".cd-features-list li" ).click(function() { 
 var u=$(this).parent('ul');
   $(u).addClass("cellClick");
  }
);
 .cellHover {
  background-color: #666666;
  }
  .cellClick {
    background: #111;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cd-products-table">
  <div class="features">
    <div class="top-info">Models</div>
    <ul class="cd-features-list">
      <li>Programme Type</li>
      <li>Completion speed</li>
      <li>Visa Coverage</li>
      <li>Investment Type</li>
      <li>Min. Investment</li>
      <li>Family included</li>
      <li>Family entitlements</li>
      <li>PR time frame</li>
      <li>Citizenship time frame</li>
      <li>Annual min. stay</li>
    </ul>
  </div>
  <!-- .features -->

  <div class="cd-products-wrapper">
    <ul class="cd-products-columns">
      <li class="product">
        <div class="top-info">
          <img src="/images/flags/portugal-flag.svg" alt="product image" height="100" width="230">
          <h3>Portugal</h3>
          <br>
          <div class="check"></div>

        </div>
        <!-- .top-info -->

        <ul class="cd-features-list">
          <li>xxxxxxx</li>
          <li class="rate"><span>5/5</span></li>
          <li>xxxxxxx</li>
          <li>xxxxxxx</li>
          <li>xxxxxxx</li>
          <li>xxxxxxx</li>
          <li>xxxxxxx</li>
          <li>xxxxxxx</li>
          <li>xxxxxxx</li>
          <li>xxxxxxx</li>
          <li>xxxxxxx</li>
        </ul>
      </li>
      <!-- .product -->

      <li class="product">
        <div class="top-info">
          <img src="/images/flags/british-flag.svg" alt="product image" height="100" width="230">
          <h3>United Kingdom</h3>
          <br>
          <div class="check"></div>

        </div>
        <!-- .top-info -->

        <ul class="cd-features-list">
          <li>xxxxxxx</li>
          <li class="rate"><span>5/5</span></li>
          <li>xxxxxxx</li>
          <li>xxxxxxx</li>
          <li>xxxxxxxs</li>
          <li>xxxxxxx</li>
          <li>xxxxxxx</li>
          <li>xxxxxxx</li>
          <li>1 xxxxxxx</li>
          <li>3 xxxxxxx</li>
          <li>1 xxxxxxx</li>
        </ul>
      </li>
      <!-- .product -->

      <li class="product">
        <div class="top-info">
          <img src="/images/flags/cypriot-flag.svg" alt="product image" height="100" width="230">
          <h3>Cyprus</h3>
          <br>
          <div class="check"></div>

        </div>
        <!-- .top-info -->

        <ul class="cd-features-list">
          <li>xxxxxxx</li>
          <li class="rate"><span>5/5</span></li>
          <li>xxxxxxx</li>
          <li>xxxxxxx</li>
          <li> xxxxxxx</li>
          <li>xxxxxxx</li>
          <li>xxxxxxx</li>
          <li>xxxxxxx</li>
          <li>1 xxxxxxx</li>
          <li>3 xxxxxxx</li>
          <li>1 xxxxxxx</li>
        </ul>
      </li>

答案 1 :(得分：0)

在悬停和单击功能中，可以使用this获取当前元素。然后，使用parent("ul")，可以选择父元素，然后使用它可以找到所有"li"，并且可以对这些元素进行任何操作。

$( "li" ).hover(function() { 
        $(this).parent('ul').find("li").addClass("cellHover");
  }, function() {
        $(this).parent('ul').find("li").removeClass("cellHover");
  }
);

$( "li" ).click(function() { 
 $(this).parent('ul').find("li").addClass("cellClick");
  }
);

提琴here

相关问题
最新问题