Question

我的html代码是

  <div class="main">
      <div class="sub-1">
    <select>
      <option>1</option>
      <option>2</option>
    </select>
  </div>

  <div class="sub-2">
    <a href="#" class="tst">Hi</a>

  </div>

</div>

因此，我想在单击.tst时更改选择框中的文本颜色。

所以我写代码

$(".main .tst").on("click",function(){

        $(this).closest(".main > select").css("color","red");

        });

但是它不起作用。

此外，当我单击链接时，页面就会向上滚动到顶部。

如何更改滚动条以选择元素。

请帮助

Answer 1

尝试使用parents() jQuery方法

$(document).ready(function() {
  $(".main .tst").on("click", function() {
    $(this).parents(".main").find("select").css("color", "red");
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <div class="sub-1">
    <select>
      <option>1</option>
      <option>2</option>
    </select>
  </div>

  <div class="sub-2">
    <a href="#" class="tst">Hi</a>

  </div>

</div>

Answer 2

您可以使用$(this).closest(".main").find('select').css("color","red");

您可以为选择标签添加id = test，并为标签$(this).attr('href', '#test');更新href

$(".main .tst").on("click",function(){

        $(this).closest(".main").find('select').css("color","red");
        $(this).attr('href', '#test');
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1>Test</h1>
<div class="main">
      <div class="sub-1">
    <select id="test">
      <option>1</option>
      <option>2</option>
    </select>
  </div>

  <div class="sub-2">
    <a href="#" class="tst">Hi</a>

  </div>

</div>

Answer 3

closest不会查看孩子，但会选择父对象，然后使用find选择select标签

$(".tst").on("click", function() {
  $(this).closest(".main").find('select').css("color", "red");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <div class="sub-1">
    <select>
      <option>1</option>
      <option>2</option>
    </select>
  </div>

  <div class="sub-2">
    <a href="#" class="tst">Hi</a>

  </div>

</div>

Answer 4

正如其他解释一样，您可以使用.parents()或closest()。

请注意，使用以下任一方法：

$(this).parents(".main").find("select").css("color", "red");

或

$(this).closest(".main").find('select').css("color", "red");

将所有select定位为目标。

由于您将href="#"设置为href="javascript:void(0)"，因此单击链接时滚动到顶部的原因可以解决此问题。有关更多说明，请参见此处：Which “href” value should I use for JavaScript links, “#” or “javascript:void(0)”?

添加更详细的选择器将阻止定位所有select元素：如果您只有一个元素，则可以选择.first()来选择哪个元素，如果您有多个:nth-child(x)，其中x是元素的索引。

要滚动并聚焦到select，可以使用.focus()。要使焦点更平滑，您可以使用.animate：

$('html,body').animate({
        scrollTop: $("select").first().offset().top
    }, 'slow');
$("select").first().focus();

请参见以下代码段：

$(document).ready(function() {
  $(".main .tst").on("click", function() {
    //$(this).parents(".main").find("select").first().css("color", "red");
    $(this).closest(".main").find('select').first().css("color", "red"); // removing first() would target all select element
  });
  $(".main .tfse").on("click", function() {
    //$(this).parents(".main").find("select").first().css("color", "green");
    $(this).closest(".main").find('select').first().css("color", "green"); // removing first() would target all select element
    $("select").first().focus();
  });
  $(".main .tfsa").on("click", function() {
    //$(this).parents(".main").find("select").first().css("color", "orange");
    $(this).closest(".main").find('select').first().css("color", "orange"); // removing first() would target all select element
    $('html,body').animate({
      scrollTop: $("select").first().offset().top
    }, 'slow');
    $("select").first().focus();
  });
  $(".main .tise").on("click", function() {
    //$(this).parents(".main").find("select:nth-child(2)").css("color", "blue");
    $(this).closest(".main").find('select:nth-child(2)').css("color", "blue");
    $('html,body').animate({
      scrollTop: $("select:nth-child(2)").offset().top
    }, 'slow');
    $("select:nth-child(2)").focus();
  });
})

.sub-2{
  margin-top:1600px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <div class="sub-1">
    <select>
      <option>1</option>
      <option>2</option>
    </select>
    
    <select>
      <option>1</option>
      <option>2</option>
    </select>
  </div>

  <div class="sub-2">
    <a href="javascript:void(0)" class="tst">Only affect but not focus (red, first)</a><br/>
    <a href="javascript:void(0)" class="tfse">Target and focus select element (green, first)</a><br/>
    <a href="javascript:void(0)" class="tfsa">Target, animate scroll and focus select element (orange, first)</a><br/>
    <a href="javascript:void(0)" class="tise">Target, animate scroll and focus select element based on your selected index - this example target second -> :nth-child(2) (blue, second)</a>
  </div>

</div>

jQuery最接近的选择器不起作用，滚动并聚焦到一个类

4 个答案: