[RESOLVED] find this jquery

cluelessPHP

Basically I'm trying to click on a button to hide certain list items, currently it's hiding everything, I'm 100% certain my logic is wrong

<div class="menu-wrapper">
            <h4>Menu</h4>
            <button id="veg">Vegetarian</button><button id="fish">Fish dishes</button><button id="meat">Meat Dishes</button><button id="all">Show all</button>
            <ul class"menu">
                <li class="meat">Hamburger</li>
                <li class="fish">Smoked Salmon</li>
                <li class="vegetarian">Miso-grilled aubergine & cucumber pickle rice bowl</li>
                <li class="meat">Steak</li>
                <li class="fish">Fish and Chips</li>
                <li class="vegetarian">Aubergine parmigiana with crispy breadcrumbs</li>       

            </ul>    

</div>

$(document).ready(function(){
    $('button').click(function(e){
        var $this = $(this).find('li');
        $("li").not($this).hide();
    });

});

cluelessPHP

 <div class="menu-wrapper">
            <h4>Menu</h4>
            <button class="vegetarian">Vegetarian</button><button class="fish">Fish dishes</button><button class="meat">Meat Dishes</button><button id="all">Show all</button>
            <ul class"menu">
                <li class="meat">Hamburger</li>
                <li class="fish">Smoked Salmon</li>
                <li class="vegetarian">Miso-grilled aubergine & cucumber pickle rice bowl</li>
                <li class="meat">Steak</li>
                <li class="fish">Fish and Chips</li>
                <li class="vegetarian">Aubergine parmigiana with crispy breadcrumbs</li>       

            </ul>    

</div>

$(document).ready(function(){
    $('button').click(function(e){
        var $this = $(this).find("class");
        $this.find().not($this).hide();
        console.log($this);
    });
});

This seems to return the item I click but not hide it

maxxd

You'll want to use .attr('id') on the button - actually, it looks like you've updated the buttons to use classes. No problem, use ".attr('class');" to get the class name instead of ".find('class');". Honestly, I'm a bit surprised that's returning anything at all... Prepend a period to that string and then use it as the selector. Right now, the value of $this is a plain string and you can't chain the find(), hide(), or not() functionality off a string. You don't really need the find() or not() functions - if $this = '.meat', then "$($this)" will select all elements with a class of 'meat' - unless I'm mistaken, that's what you're trying to do?

cluelessPHP

Yeah something like

$(document).ready(function() {
  $('button').click(function() {
    var selection = $(this).attr('class');
    $('.menu').find('li').show();
    if (selection) { 
      $('.menu').find('li').not('.' + selection).hide();
    }
  });
});

maxxd

Ah, so you're wanting to hide everything but the selected option? In that case why not hide everything but the selected option, then make sure the selected option is shown?

$('.menu-wrapper button').on('click', function(e){
	e.preventDefault();
	var attr = '.' + $(this).attr('class');
	if(attr == '.all'){
		$('li').show();
	}else{
		$('.menu li').hide();
		$(attr).show();
	}
});

Another thing I just noticed that might be throwing you off is you're missing the '=' in the menu class assignment.

<ul class"menu">

Should be this:

<ul class="menu">

cluelessPHP

Yeah, I noticed the ul thing, I didn't think it could be done like that, it seems cleaner

if I'm reading this correctly

var attr = '.' + $(this).attr('class');

the '.' indicates it's a class but thought .attr('class') would do that anyway, no?

maxxd

.attr('class') is going to return the string assigned to the class attribute. So, given this:

<ul class="menu">

using

$(this).attr('class');

will return the string 'menu'. Prepending the dot to the string allows you to use the variable as the selector string in jQuery. Basically, this:

var attr = '.' + $(this).attr('class');
// now $(attr) === $('.menu');

//otherwise
var attr = $(this).attr('class');
// $(attr) === $('menu');

Without the dot, jQuery will look for a structural element <menu> instead of a structural element with the class 'menu'.

I hope that makes sense. I'm starting to think I haven't had enough coffee today...

cluelessPHP

maxxd;11063445 wrote:
.attr('class') is going to return the string assigned to the class attribute. So, given this:
<ul class="menu">
using
$(this).attr('class');
will return the string 'menu'. Prepending the dot to the string allows you to use the variable as the selector string in jQuery. Basically, this:
var attr = '.' + $(this).attr('class');
// now $(attr) === $('.menu');

//otherwise
var attr = $(this).attr('class');
// $(attr) === $('menu');
Without the dot, jQuery will look for a structural element <menu> instead of a structural element with the class 'menu'.

I hope that makes sense. I'm starting to think I haven't had enough coffee today...

Ah ok I'm with you now