如何使用 jquery 选择下一个元素

How to select next element using jquery?

本文关键字：下一个 元素 选择 jquery 何使用      更新时间：2023-09-26

我想在下一个元素上应用一些设计。但我的问题是我收到此错误：

Error: Syntax error, unrecognized expression: [object Object] > label

以下是我的选择：

浏览方式 
<ul class="list-unstyled">
    <li>
        <input type="radio" id="cat-1" class="category_select" name="category_type" data-category-type="1" value="all_product" checked="checked" />
        <label for="cat-1"><span></span>All</label>     
    </li>
    <li>
        <input type="radio" id="cat-2" class="category_select" name="category_type" data-category-type="2" value="japanese_tea" />
        <label for="cat-2"><span></span>Japanese Tea</label>        
    </li>
    <li>
        <input type="radio" id="cat-3" class="category_select" name="category_type" data-category-type="3" value="black_vinegar" />
        <label for="cat-3"><span></span>Black Vinegar</label>       
    </li>
    <li>
        <input type="radio" id="cat-4" class="category_select" name="category_type" data-category-type="4" value="food" />
        <label for="cat-4"><span></span>Food</label>        
    </li>
    <li>
        <input type="radio" id="cat-5" class="category_select" name="category_type" data-category-type="5" value="cosmetic_health" />
        <label for="cat-5"><span></span>Cosmetic / Health</label>       
    </li>
    <li>
        <input type="radio" id="cat-6" class="category_select" name="category_type" date-category-type="6" value="others" />
        <label for="cat-6"><span></span>Others</label>      
    </li>
</ul>

这是我的JS：

$('.category_select').on('change', function() {
    var cat = $(this);
    var category_type = $(this).data('category-type');
    $(cat + ' > label').css({'color':'red'}); //wont apply some css why?
});

你能帮我这个吗？

你需要使用 .next（） 遍历方法来获取元素的下一个同级

元素

在你的代码中，cat是一个jQuery对象，所以当在字符串连接中使用时，你的选择器会变得[object Object] > label 

$('.category_select').on('change', function() {
  var cat = $(this);
  var category_type = $(this).data('category-type');
  cat.next('label').css({
    'color': 'red'
  }); //wont apply some css why?
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-unstyled">
  <li>
    <input type="radio" id="cat-1" class="category_select" name="category_type" data-category-type="1" value="all_product" checked="checked" />
    <label for="cat-1"><span></span>All</label>
  </li>
  <li>
    <input type="radio" id="cat-2" class="category_select" name="category_type" data-category-type="2" value="japanese_tea" />
    <label for="cat-2"><span></span>Japanese Tea</label>
  </li>
  <li>
    <input type="radio" id="cat-3" class="category_select" name="category_type" data-category-type="3" value="black_vinegar" />
    <label for="cat-3"><span></span>Black Vinegar</label>
  </li>
  <li>
    <input type="radio" id="cat-4" class="category_select" name="category_type" data-category-type="4" value="food" />
    <label for="cat-4"><span></span>Food</label>
  </li>
  <li>
    <input type="radio" id="cat-5" class="category_select" name="category_type" data-category-type="5" value="cosmetic_health" />
    <label for="cat-5"><span></span>Cosmetic / Health</label>
  </li>
  <li>
    <input type="radio" id="cat-6" class="category_select" name="category_type" date-category-type="6" value="others" />
    <label for="cat-6"><span></span>Others</label>
  </li>
</ul>

您可以使用所选输入框的 id 属性直接选择下一个label

 $('.category_select').on('change', function() {
        var cat = this.id;
        var category_type = $(this).data('category-type');
       $("label").css({'color':'black'}) // Remove red color from previously selected item
        $("label[for='"+cat+"']").css({'color':'red'}); // Apply red color on selected item
    });

JSFIDDLE 示例

>你需要使用 .next（） 选择器来选择下一个元素，而不是 $（cat + '> label'）

$('.category_select').on('change', function() {
    var cat = $(this);
    var category_type = $(this).data('category-type');
    cat.next('label').css({'color':'red'}); //syntax for selecting next in js
});

希望这对你有帮助？？

相关文章：