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

Question

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

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?

});

你能帮我做这个吗？

Answer 1

您需要使用.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>

​

Answer 2

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

 $('.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示例

Answer 3

您需要使用.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

});

希望这能帮到你？？