Select only elements with a certain CSS attribute using JQuery - javascript

Ok I have this code
$("#search-results-all").children(".search-result-item").length;
Now, all I want there is to select only the .search-result-item elements that is only visible by using css attribute visibility:visible. Now how can i make this possible?
P.S. Sorry I don't know what to type in Google so I can start searching.
UPDATE...
well it worked by doing something like this
$("#search-results-all").children(".search-result-item:visible").length;
thank you for the answers

The following?
$("#search-results-all > .search-result-item").filter(function() {
return $(this).css('visibility') == 'visible';
}).length;
http://api.jquery.com/filter/

Try this one:
$("#search-results-all .search-result-item").filter(function() {
return $(this).css('visibility') == 'visible';
});

:visible Selector - Selects all elements that are visible.
$("#search-results-all").children(".search-result-item:visible").length;
or
$("#search-results-all").children(".search-result-item")).is(':visible');

Related

remove some elements if no children

i need to remove some elements if no children...
this will work...
$$('*').each(function() {
($$(this).text().trim() === '') && $$(this).remove()
});
but it will look for all elements... i need to limit to some elements.. so i made this..
elements.forEach(element => {
$$(element).each(function() {
($$(this).text().trim() === '') && $$(this).remove()
});
})
but it doesn't work..
You can use :empty pseudo selector to collect all the empty elements:
$(':empty').remove(); // removes all the empty elements
If you target some specific elements then either give it a class name and use both in conjuction:
$('.theClass:empty').remove();
Or just use the tagnames of specific elements:
$('div:empty').remove(); // removes all the empty divs
You can use the id, classor tag in the jQuery selector. Try the following way:
$("div:empty").remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<div><span>test</span></div>
<div></div>
I like Mamun's approach. If you want to apply it on a certain collection of element types only you could modify/simplify it as such:
$("div,td,p,... and other elements").filter(":empty").remove();
Sorry, just noticed, that Jay also provided a part of my solution. I did not want to repeat things unecessarily here, but maybe the combination of the two is still relevant.
Remove all empty tags from current document
$("*:empty").remove();
If I understood correctly what you asked, you should rty :
if($("some selection").children() === undefined){
//do something
}
or as a function :
function rmIfNoChild(jQobj){
if(jQobj.children() === undefined){
//do something
}
}

remove jquery elements that do not have a class

Hi can any one help me get all elements in jquery that do not have a class.
I have a list and I want to get all of the that do not have a class and delete it
Here is the code I have so far
var listTableHeaders = $("ROI-List").find("th");
listTableHeaders.not(".sorting").remove();
I realized that there are other classes other than "sorting" as seen in this pic
I can just remove the elements that are not "sorting" or "sorting_disabled" but I am not sure if there are other classes so it would be more convenient to remove the th that do not have any class.
Thank you
You can filter it
listTableHeaders.filter(function(){
return !$(this).is('[class]');
}).remove();
Something like this:
$("ROI-List").find("th").each(function () {
if (!$(this).prop('class').length) {
$(this).remove();
}
});
I belive this will work for what you're trying to do:
$("ROI-List").find("th:not([class])").remove();

Show each first element in a list of parent elements (jQuery+CSS)

I'm a bit stuck here. I'm trying to show the first div for each section I have using jQuery. There's multiple parent elements .each-business-content-extra which has a few child elements .each. Each .each is set to display none via the CMS, but I want the first .each in each .each-business-content-extra that exists to be set to display:block.
I tried this —
$('.each-business-content-extra .each:first').each(function() {
$(this).show();
});
Any ideas?
Thanks,
R
You can use .eq() to target the first element of each .each class. http://api.jquery.com/eq/
Try this:
$('.each-business-content-extra .each:eq(0)').each(function() {
$(this).show();
});
Alternatively, try this:
$('.each-business-content-extra .each:eq(0)').css('display', 'block');
You can do it your way, but the correct selector is :first-of-type:
$('.each-business-content-extra .each:first-of-type').each(function() {
$(this).show();
});
You can try with this simple one,
$('.each-business-content-extra .each:first-child').show();
Try
$('.each-business-content-extra').find('.each:first').show()
Demo: Fiddle
try this:
$('.each-business-content-extra').children(":first").show();
Turns out it was a combination of everyones...
$('.each-business-content-extra').each(function() {
$(this).find('.each:first').show();
});
Thanks so much.

How to add a class when a link has a certain label

I have a series of links with no a classes. I am unable to manually add any classes in the HTML...otherwise I would. I want to use either JavaScript or jQuery to detect a certain link label and add a class to it if the match is found.
Here is the HTML:
<ul class="menu-main-nav">
<li>Duck</li>
<li>Duck</li>
<li>Goose</li>
</ul>
I want to add a class whenever "Goose" appears. Here is what I attempted... and failed.
$(document).ready(function(){
if ($("#menu-main-nav li a").text() == "Goose") { this.addClass("itsagoose")};
});
Use the .filter method:
$("#menu-main-nav li a").filter(function(){
return $(this).text() == "Goose"; //<--- Only include these elements
}).addClass("itsagoose");
Use .html() instead of .text() if you want an exact match, and don't want to allow anything else (eg, don't match <a><span>Goose</span></a>).
Fiddle: http://jsfiddle.net/RWSCY/
Look at the jQuery contains selector. That's what it's for :)
Well, you could use filter:
Demo
$("a").filter(function(){
return $(this).text() == "Goose"
});

Check if element is a div

How do I check if $(this) is a div, ul or blockquote?
For example:
if ($(this) is a div) {
alert('its a div!');
} else {
alert('its not a div! some other stuff');
}
Something like this:
if(this.tagName == 'DIV') {
alert("It's a div!");
} else {
alert("It's not a div! [some other stuff]");
}
Solutions without jQuery are already posted, so I'll post solution using jQuery
$(this).is("div,ul,blockquote")
Without jQuery you can say this.tagName === 'DIV'
Keep in mind that the 'N' in tagName is uppercase.
Or, with more tags:
/DIV|UL|BLOCKQUOTE/.test(this.tagName)
To check if this element is DIV
if (this instanceof HTMLDivElement) {
alert('this is a div');
}
Same for HTMLUListElement for UL,
HTMLQuoteElement for blockquote
if(this.tagName.toLowerCase() == "div"){
//it's a div
} else {
//it's not a div
}
edit: while I was writing, a lot of answers were given, sorry for doublure
Going through jQuery you can use $(this).is('div'):
Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.
Some of these solutions are going a bit overboard. All you need is tagName from regular old JavaScript. You don't really get any benefit from re-wrapping the whole thing in jQuery again, and especially running some of the more powerful functions in the library to check the tag name. If you want to test it on this page, here's an example.
$("body > *").each(function() {
if (this.tagName === "DIV") {
alert("Yeah, this is a div");
} else {
alert("Bummer, this isn't");
}
});
let myElement =document.getElementById("myElementId");
if(myElement.tagName =="DIV"){
alert("is a div");
}else{
alert("is not a div");
}
/*What ever you may need to know the type write it in capitalised letters "OPTIO" ,"PARAGRAPH", "SPAN" AND whatever */
I'm enhancing the answer of Andreq Frenkel, just wanted to add some and it became too lengthy so gone here...
Thinking about CustomElements extending the existing ones and still being able to check if an element is, say, input, makes me think that instanceof is the best solution for this problem.
One should be aware though, that instanceof uses referential equality, so HTMLDivElement of a parent window will not be the same as the one of its iframe (or shadow DOM's etc).
To handle that case, one should use checked element's own window's classes, something like:
element instanceof element.ownerDocument.defaultView.HTMLDivElement
Old question but since none of the answers mentions this, a modern alternative, without jquery, could be just using a CSS selector and Element.matches()
element.matches('div, ul, blockquote');
Try using tagName

Categories

Resources