CODEWITHSUNDEEP
javascriptjquerycss
Jerielle
Jerielle

Reputation: 7520

How to select next element using jquery?

I want to apply some design on the next element. But my problem is I am getting this error:

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

Here's my selections:

BROWSE BY 
<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>

Here's my 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?

});

Can you help me with this?

Upvotes: 0

Views: 74

Answers (3)

Mohamed Faraj
Mohamed Faraj

Reputation: 3

you need to use .next() selector for selecting the next element, instead $(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

});

Hope this helped you out??

Upvotes: 0

brk
brk

Reputation: 50291

You can directly select the next label using the id attribute of selected input box

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

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

You need to use .next() traversal method to get the next sibling of an element

In your code cat is a jQuery object so when used in string concatenation your selector becomes [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>

Upvotes: 2

Related Questions