.is(':visible') does not work in jQuery - javascript

I use .is(':visible') method in jquery but it does not work as expected.
Here is my code snippet
What did I miss there?
HTML:
<div class="str">
<ul><li>1</li><li>hide</li></ul>
<ul><li>2</li><li>hide</li></ul>
<ul><li>3</li><li>hide</li></ul>
<ul><li>4</li><li>hide</li></ul>
<ul><li>5</li><li>hide</li></ul>
<ul><li>6</li><li>hide</li></ul>
<div class="length"></div>
</div>
jQuery:
$(function(){
$('.str ul').find('a').live('click',function(){
$(this).closest('li').parent().hide();
var ll= $('.str').find('ul').each(function(){
$('.length').text( $('.str').find('ul').is(':visible').length );
});
});
});

Use: $('.str').find('ul:visible').length
jsFiddle demo
$(function(){
$('.str ul').on('click','a',function(){
$(this).closest('li').parent().hide();
var visibleUL = $('.str').find('ul:visible').length;
$('.length').text( visibleUL );
alert(visibleUL );
});
});
While .is() returns a boolean value ( true / false ), the :visible selector targets the desired elements creating an elements array collection - exactly what you need to return a valid array length

The .is() method returns true or false
From the docs:
Unlike other filtering methods, .is() does not create a new jQuery object.
You should use find() or filter() not is().

is(':visible') returns a boolean, not a jQuery object:
// Wrong
if ($selector.is(':visible').length) {
// Right
if ($selector.is(':visible')) {

I would change that weird HTML to an actual list, not a bunch of lists with one item each :
<div class="str">
<ul>
<li>1<br>hide</li>
<li>2<br>hide</li>
<li>3<br>hide</li>
<li>4<br>hide</li>
<li>5<br>hide</li>
<li>6<br>hide</li>
</ul>
<div class="length"></div>
</div>​
And then do:
$(function() {
$('a', '.str ul').on('click', function() {
$(this).closest('li').hide();
$('.length').text($('.str ul li:visible').length);
});
})​;​
FIDDLE

Related

Grab the class from an element JS

I have an li tag that looks like:
<li class="active_fix generator" data-selected="1"></li>
Within my onClick event I have a console.log on $(this) and I get back
[li.active_fix generator] - among a few things in my console window.
How can I grab the class. So for example save the classname active_fix as a var but not the second class name generator.
$('active_fix').on('click', function() {
console.log($(this));
})
Thanks.
You can split the class name,
$(this).attr("class").split(" ")[0]
We are getting the class name using attr and splitting the string by a space, then we are getting the first key in the array.
Reading Material
attr
split
Try to use .attr("attributeName") to get its attribute(any),
$('.active_fix').on('click', function() {
console.log($(this).attr("class").split(" ")[0]); //Jquery
console.log(this.className.split(" ")[0]); //Pure Javascript
});
this.className will return a string "active_fix generator". Basically multiple classes to an element can be applied by adding a space as a delimiter. So you can split that returned string with space to get array of class names. And from that array [0] will get you the first class.
You can use classList to retrieve a list of the elemnent classes:
$('.active_fix').on('click', function() {
alert(this.classList[0]);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="active_fix generator" data-selected="1">...</li>
$('.active_fix').on('click', function() {
alert($(this).attr("class").split(" ")[0]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="active_fix generator" data-selected="1"></li>
DevJunior Try This , It will help you
$('.active_fix').on('click', function() {
console.log($('.active_fix').attr('class').split(' ')[0]);
});
$('.active_fix').on('click', function() {
alert(this.classList[0]);
})

Hide an element when a specific string is present in the url

I want to hide a button when the string "wholesale' is present in the url. I've tried a few variations of the following code but it just won't work.
<script type="text/javascript">
$(document).ready(function () {
if (/wholesale/.test(window.location.href)) {
document.getElementsByClassName('variations_button')[0].style.display = 'none';
}
});
</script>
May be this will help.
var patt = new RegExp("wholesale");
if (patt.test(window.location.href)) {
$('.variations_button').hide();
}
you are doing wrong with the select element by class name code
it should be like this:
document.getElementsByClassName('variations_button')[0].style.display='none'
Note:
document.getElementsByClassName returns an array of elements with the same class name. So document.getElementsByClassName('variations_button')[0] will return the first element with the class name variations_button.
you have a problem with getElementByClassName, it should be getElementsByClassName and will return a HTMLCollection (Array like object) not an element. You should probably also use jQuery if that is already loaded on the page. jQuery is an array like object of HTMLElements that will give you methods that will run over the entire collection.
edit:
here is a working example, click 'Run code snippet' to see the result. I had to change the regex to match what was in the snippet, but you should get the idea.
console.log( 'is jQuery installed on the page', typeof $ !== void 0 );
$(function () {
console.log( 'href', window.location.href );
if (/stacksnippets/.test(window.location.href)) {
console.log('regex found in href');
$('.variations_button').css('background', '#3cf');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://codepen.io/synthet1c/pen/WrQapG.js"></script>
<button class="variations_button">variations button</button>

How select the selector from its method?

I need to change the text of '#foo #three' using 'this' to get the text of the div#one
The output I need is:
cat
dog
cat
Html:
<div id="foo">
<div id="one">cat</div>
<div id="two">dog</div>
<div id="three">mouse</div>
</div>
JS:
$("#foo #three").text($(this).parent().children().first().text());
I need this code dynamically
http://jsfiddle.net/Kodam/s466a31q/
Unless you are trying to do this dynamically, this is as simple as:
$('#three').text($('#one').text());
$("#three").text($('#foo').children().first().text());
Update: If you really want to use this to reference the match, would recommend to use each:
$("#foo #three").each(function(){ // this only matches #three
$(this).text($(this).parent().children().first().text());
})
Though this approach uses a kind of workaround, it works:
$jSelect = $("#foo #three");
$jSelect.text( function(){
var jParts = $jSelect.selector.split(" ");
return $(jParts[0]).find("div:first").text();
});
Fiddle
But I wouldn't recommend it as .selector is deprecated as of jQuery 1.7 and only maintained for supporting live() in the jQuery Migrate plugin.
For Reference: http://api.jquery.com/selector/
Update: And a similar approach without using .selector:
jSelect = ("#foo #three");
$(jSelect).text( function(){
var jParts = jSelect.split(" ");
return $(jParts[0]).find("div:first").text();
});
Fiddle
if you insist on using this, you can do it this way:
Fiddle Example
basically, since this only works inside a function context, you create a function that returns a string and put it inside the .text().
$(function () {
$("#foo #three").text(function () {
return $(this).parent().children().first().text();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
<div id="one">cat</div>
<div id="two">dog</div>
<div id="three">mouse</div>
</div>

jQuery selector that excludes a subtree of the DOM

Is there a jQuery selector that will grab all elements of class A that are not descendants of class B?
Example:
<body>
<div class=report-value id=overview></div>
<div class=panels>
<div class=report-value id=sales></div>
<div class=report-value id=training></div>
<div class=report-value id=hr></div>
</div>
<div class=report-value id=summary></div>
</body>
For the above example, the need is to select all .report-value elements that are not descendants of the .panels element. The report values are computationally heavy and need to be calculated only when actually displayed.
Something like:
var elems = $('.report-value:excludeTree(.panels)');
which would return a jQuery object containing only #overview and #summary.
Performance is important for this web application.
You can use .not() filter out those elements
$('.report-value').not('.panels .report-value')
Demo: Fiddle
Try,
var elems = $('.report-value').filter(function(){
return $(this).closest('.panels').length ==0;
});
DEMO
var allpanels=$('body>.report-value');
$('body > .report-value')
or
$('.report-value').each(function(){
if(!$(this).parent().hasClass('.panels'))
{
//use query
}
});
Try this:
$('.report-value').each(function(){
if(!$(this).parent().hasClass('panels') && !$(this).parents().eq(1).hasClass('panels'))
{
console.log($(this));
}
});
It console only ur required divs

How can I select an element which does not contain a certain child element?

<div class="test">
<div class="example"></div>
</div>
<div class="test">
</div>
How can I apply jQuery to an element with the class test only if it doesn't contain a child element with the class example?
$('.test:not(:has(.example))')
-or-
$('.test').not(':has(.example)')
Possibly
$('.test').filter(function() { return !$(this).children('.example').length; });
This filters out any elements that have any child that matches .example. If you want to filter based on descendants (not just children) that you can substitute .find for .children.
$(':not(.test:has(.example))').css('color', 'red');​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
http://jsfiddle.net/9fkz7y1g/
jQuery contains():
jQuery.contains(document.documentElement, document.body); // true
jQuery.contains(document.body, document.documentElement); // false
This problem seems ready-made for the filter function where you find all the .test objects and then when filtering retain only the ones that don't have .example in them:
$(".test").filter(function() {
return($(this).find(".example").length == 0);
});
You could use the method children with ".example" and test if it is empty
$('.test').each(function() {
if(!$(this).children().hasClass("example")){
//your code
}
});
Maybe like this? I haven't tested this...
if (!$('#yourDiv').children().hasClass("className")) {
//i.e. yourDivID' has no any children whose class name =>'className'
}

Categories