使用jQuery选择子元素

时间：2017-10-26 11:23:03

标签： javascript jquery html css

我有三个盒子，每个盒子都有一个图像，当我将鼠标悬停在父元素上时，我试图显示这个图像。但是我只希望显示正在悬停的父母的图像。这是我的代码;

＆＃13;
＆＃13; 
jQuery(".job_col").hover(function() {
  var current = jQuery(this);
  jQuery(current > ".plus").addClass("hi");
}, function() {

});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fixed_jobs_fluid">
  <div class="container">
    <div id="fixed_jobs_cont">
      <div class="job_col">
        <h2 class="f_job_title">Construction Site <br class="fixed_br">Supervisor role</h2>
        <p class="f_salary">Salary: £20,000 – £22,000</p>
        <img class="plus" src="<?php bloginfo('template_directory'); ?>/images/plus.png" alt="">
      </div>

      <div class="job_col" id="border">
        <h2 class="f_job_title">Construction Contracts <br class="fixed_br">Manager role</h2>
        <p class="f_salary">Salary: £40,000 – £45,000</p>
        <img class="plus" src="<?php bloginfo('template_directory'); ?>/images/plus.png" alt="">
      </div>

      <div class="job_col">
        <h2 class="f_job_title">Graduate Quantity <br class="fixed_br">Surveyor role</h2>
        <p class="f_salary">Salary: £20,000 – £22,000</p>
        <img class="plus" src="<?php bloginfo('template_directory'); ?>/images/plus.png" alt="">
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

7 个答案:

答案 0 :(得分：2)

您可以使用.children() - 功能：

jQuery(".job_col").hover(function(){
    var current = jQuery(this);
    current.children(".plus").addClass("hi");
    }, function(){
});

这会选择具有班级.job_col的悬停plus的子女。

答案 1 :(得分：2)

作为替代解决方案：

当父母悬停时，你不需要jQuery来显示元素。你可以只使用CSS！

＆＃13;
＆＃13; 
img {
display: none; }

.job_col:hover img {
display: block;
}

.job_col {
float:left;
width: 33% 
}
＆＃13; 
<div class="container">
            <div id="fixed_jobs_cont">
                <div class="job_col">
                    <h2 class="f_job_title">Construction Site <br class="fixed_br">Supervisor role</h2>
                    <p class="f_salary">Salary: £20,000 – £22,000</p>
                    <img class="plus" src="http://via.placeholder.com/200x150" alt="">
                </div>

                <div class="job_col" id="border">
                    <h2 class="f_job_title">Construction Contracts <br class="fixed_br">Manager role</h2>
                    <p class="f_salary">Salary: £40,000 – £45,000</p>
                    <img class="plus" src="http://via.placeholder.com/200x150" alt="">
                </div>

                <div class="job_col">
                    <h2 class="f_job_title">Graduate Quantity <br class="fixed_br">Surveyor role</h2>
                    <p class="f_salary">Salary: £20,000 – £22,000</p>
                    <img class="plus" src="http://via.placeholder.com/200x150" alt="">
                </div>
            </div>
        </div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

＆＃13;
＆＃13; 
jQuery(".job_col").hover(function(){
    var current = jQuery(this);
    current.find(".plus").addClass("hi");
    }, function(){

});
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：1)

使用find()或children()，在这种情况下都有效：

$(document).ready(function(){
  $(".job_col").hover(function(){
      $(this).find(".plus").addClass("hi");
      }, function(){
      $(this).find(".plus").removeClass("hi");
  });
});
.plus{
  height: 50px;
  width: 50px;
}
.hi{
  height: 100px;
  width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="fixed_jobs_fluid">
        <div class="container">
            <div id="fixed_jobs_cont">
                <div class="job_col">
                    <h2 class="f_job_title">Construction Site <br class="fixed_br">Supervisor role</h2>
                    <p class="f_salary">Salary: £20,000 – £22,000</p>
                    <img class="plus" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded" alt="">
                </div>

                <div class="job_col" id="border">
                    <h2 class="f_job_title">Construction Contracts <br class="fixed_br">Manager role</h2>
                    <p class="f_salary">Salary: £40,000 – £45,000</p>
                   <img class="plus" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded" alt="">
                </div>

                <div class="job_col">
                    <h2 class="f_job_title">Graduate Quantity <br class="fixed_br">Surveyor role</h2>
                    <p class="f_salary">Salary: £20,000 – £22,000</p>
                    <img class="plus" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded" alt="">
                </div>
            </div>
        </div>
    </div>

答案 4 :(得分：0)

尝试使用find()功能

＆＃13;
＆＃13; 
jQuery(document).ready(function(){
  jQuery(".job_col").hover(function(){
      var current = jQuery(this);
      current.find(".plus").addClass("hi");
      }, function(){
      var current = jQuery(this);
      current.find(".plus").removeClass("hi");
  });
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="fixed_jobs_fluid">
        <div class="container">
            <div id="fixed_jobs_cont">
                <div class="job_col">
                    <h2 class="f_job_title">Construction Site <br class="fixed_br">Supervisor role</h2>
                    <p class="f_salary">Salary: £20,000 – £22,000</p>
                    <img class="plus" src="<?php bloginfo('template_directory'); ?>/images/plus.png" alt="">
                </div>

                <div class="job_col" id="border">
                    <h2 class="f_job_title">Construction Contracts <br class="fixed_br">Manager role</h2>
                    <p class="f_salary">Salary: £40,000 – £45,000</p>
                    <img class="plus" src="<?php bloginfo('template_directory'); ?>/images/plus.png" alt="">
                </div>

                <div class="job_col">
                    <h2 class="f_job_title">Graduate Quantity <br class="fixed_br">Surveyor role</h2>
                    <p class="f_salary">Salary: £20,000 – £22,000</p>
                    <img class="plus" src="<?php bloginfo('template_directory'); ?>/images/plus.png" alt="">
                </div>
            </div>
        </div>
    </div>
＆＃13;
＆＃13;
＆＃13;

答案 5 :(得分：0)

.hi {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fixed_jobs_fluid">
  <div class="container">
    <div id="fixed_jobs_cont">
      <div class="job_col">
        <h2 class="f_job_title">Construction Site <br class="fixed_br">Supervisor role</h2>
        <p class="f_salary">Salary: £20,000 – £22,000</p>
        <img class="plus" src="<?php bloginfo('template_directory'); ?>/images/plus.png" alt="">
      </div>

      <div class="job_col" id="border">
        <h2 class="f_job_title">Construction Contracts <br class="fixed_br">Manager role</h2>
        <p class="f_salary">Salary: £40,000 – £45,000</p>
        <img class="plus" src="<?php bloginfo('template_directory'); ?>/images/plus.png" alt="">
      </div>

      <div class="job_col">
        <h2 class="f_job_title">Graduate Quantity <br class="fixed_br">Surveyor role</h2>
        <p class="f_salary">Salary: £20,000 – £22,000</p>
        <img class="plus" src="<?php bloginfo('template_directory'); ?>/images/plus.png" alt="">
      </div>
    </div>
  </div>
</div>
conf = SparkConf()  # create the configuration
conf.set("spark.jars", "/path/to/postgresql-connector-java-someversion-bin.jar")  # set the spark.jars

...
spark = SparkSession.builder \
        .config(conf=conf) \  # feed it to the session here
        .master("local") \
        .appName("Python Spark SQL basic example") \
        .getOrCreate()

答案 6 :(得分：0)

检查以下代码，可能对您有所帮助

var x=0;
$('a').click(function() {
if(x==0){
$(this).parent().find('img').css('visibility','hidden');
x=1;
}
else{$(this).parent().find('img').css('visibility','visible');
x=0;
}
});
.plus{
visibility:hidden;
}

a:hover{cursor:pointer;
user-select: none;
}div{float:left;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="job_col">
                     <a >clik here 1</a>         
                    <img class="plus" src="http://iconbug.com/data/f6/128/942491bc40fa4b67a950d03d3d2f6399.png" alt="">
                </div>
                <div class="job_col" id="border">
                     <a>clik here 2</a>                  
                    <img class="plus" src="http://clipart.info/images/minicovers/1496184671Wads-of-Dollars-Transparent-PNG-Clip-Art-Image.png" alt="">
                </div>
                <div class="job_col">
                   <a>clik here 3</a>
                    <img class="plus" src="http://clipart.info/images/minicovers/1496184667100-Euro-PNG-Clipart.png" alt="">
                </div>

相关问题
最新问题