hide() in Jquery . [Reduce Line ]-CodePudding


function hello(this){
 $("#fgCode_span").hide();
    $("#sfgCode_span").hide();
    $("#plant_span").hide();
    $("#fgCode_span2").hide();
    $("#sfgCode_span2").hide();
    $("#plant_span2").hide();
}

Its working perfectly fine , but I need to reduce line, instead of writing .Hide() many time for every controls/tags/ids

Please Help. to make it simple

CodePudding user response：

jQuery multiple elements Selector

$('element1,element2,element3,...');

Note: Seperate each element with a comma.

Extended usage

If you will use these in multiple functions, you can try this.

const elements = ['#element1', '#element2', '#element3'];

const hide = () => $(elements.join(',')).hide();
const show = () => $(elements.join(',')).show();

CodePudding user response：

You can put them all into a single selector string.

function hello() {
    $("#fgCode_span, #sfgCode_span, #plant_span, #fgCode_span2, #sfgCode_span2, #plant_span2").hide();
}

CodePudding user response：

this way I followed to do it

$("#fgCode_span ,#sfgCode_span ,#plant_span").hide();
$("#fgCode_span2 ,#sfgCode_span2 ,#plant_span2").hide();

CodePudding user response：

function hello(this){
$("#fgCode_span,#sfgCode_span,#plant_span,#fgCode_span2,#sfgCode_span2,#plant_span2").hide();

}

<div id="fgCode_span">fgCode_span</div>
<div id="sfgCode_span">sfgCode_span</div>
<div id="plant_span">plant_span</div>
<div id="fgCode_span2">fgCode_span2</div>
<div id="sfgCode_span2">sfgCode_span2</div>
<div id="plant_span2">plant_span2</div>
<button onclick="hello(this)">Click To Hide</button>