We Keep Coding

Select only (display:block) element from list of items Jquery

I'm making a menu and i need to select one particular element from a list of element returned by Jquery.
When i run on console :
$("[type='subMenu']")
This returns 4 matching submenu elements.
<div type="subMenu" style="display:block">
<div type="subMenu" style="display:none">
<div type="subMenu" style="display:none">
Now, i need to select only the element having display:block
I tried
$("[type='subMenu']").css('display') == 'block'
but this give false as output.
and
$("[type='subMenu']").css('display')
this is giving output as none

Others have already pointed out the JQuery :visible selector. However, there are some performance issues with it, as pointed out in the JQuery API documentation:
Additional Notes:
Because :visible is a jQuery extension and not part of the CSS specification, queries using :visible cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :visible to select elements, first select the elements using a pure CSS selector, then use .filter(":visible").
Using this selector heavily can have performance implications, as it may force the browser to re-render the page before it can determine visibility. Tracking the visibility of elements via other methods, using a class for example, can provide better performance.
If you'd prefer to avoid those issues, you could use a native CSS selector, instead. In plain ol' normal JavaScript, this would do the trick for you:
document.querySelector("[type=subMenu][style*=display\\:block]");
Or, if you need to select multiple elements at once:
document.querySelectorAll("[type=subMenu][style*=display\\:block]");
I believe the equivalent in JQuery (I don't use it) for both would be:
$("[type=subMenu][style*=display\\:block]");
If the only style that will ever be set inline on those tags is display then you can omit the * from the style attribute selector.

Try this:
console.log($("[type='subMenu']:visible")).
It will give all visible elements

You can use filter or pseudo class.
$("[type='subMenu']").filter(function(){
this.style.display == 'block';
});

Determine which element is first and do this

I need to set focus on the first form element or class of ".focus"; whichever is visible or first.
This does not seem to sort through each to determine which comes first?
http://jsfiddle.net/infatti/tdvHJ/1/
$('.focus:visible:first, body:not(:has(.focus:visible)) input:visible:first, body:not(:has(.focus:visible)) textarea:visible:first').focus();

This will locate all visible input elements, textarea elements and .focus elements:
$('input:visible, .focus:visible, textarea:visible')
It will also have them ordered according to their order in the DOM, so the first of those elements in the document will be the first in the jQuery object. To access the first:
$('input:visible, .focus:visible, textarea:visible').eq(0);
and to focus on it:
$('input:visible, .focus:visible, textarea:visible').eq(0).focus();
Note that, as I just found out, jQuery considers elements to be 'visible' if they take up space in the document. So elements with visibility:hidden or opacity:0 will still be considered visible:
http://api.jquery.com/visible-selector/

Like this ?
$('.focus:visible:first, body:not(:has(.focus:visible)) input:visible:first, body:not(:has(.focus:visible)) textarea:visible:first').eq(0).focus();
Fiddle :
http://jsfiddle.net/infatti/tdvHJ/1/
Eq(0) select the first element... ;)

Try:
$('.focus:visible:first').filter(":input").focus();
jsFiddle example

im not sure what you are trying to achieve as there isnt any elements with the class focus. Simply add the class focus to your input element and then us
$('.focus').focus();

Hiding the <p> and showing the <textarea> on a <a> click

I know the title sounds quite easy but the real problem is the markup. I have a link in a div which also in another div but the textarea and the paragraph are in another div so that's why I am having problem on how to show and hide elements in a completely different markuped div from a completely different markuped div.
I saw .parent() and .children() and .siblings(). But they couldn't help me or I think that I was not able to take help of those.
Here's the fiddle.
Here is the JS I tried:
$(".no_link").click(function(e) {
e.preventDefault();
});
$(".edit_offer").on('click', function() {
$(this).parent().parent().siblings().children("textarea").toggle();
});

You can use these selectors, but it will rely on the class username being in the heirarchy as you have in your code:
$(".edit_offer").on('click', function () {
$(this).closest('.username').find("textarea").toggle();
});
jsFiddle example
.closest() will traverse up the DOM until it hits the element with class username, then .find() will go down through the children looking for the textarea.

I did it using find(). http://jsfiddle.net/SZUT8/2/ To make the script more accurate and future-proof you could consider adding a class to the paragraph and matching it, as in here: http://jsfiddle.net/SZUT8/4/

You could always assign an ID (or a class, for multiple) to each of the desired elements ("p" and "textarea" in your case). Then use your ID/class to reference them for the show() or hide() methods, rather than navigating the DOM via parent(), sibling() and children().
Then your click handler will only need the line:
$('#idOfElement).toggle();

Will jQuery select hidden elements

If I call .hide() on an element, will/can jQuery select it in a normal dom selector.
If jQuery does normally select hidden elements, what is the proper way to select only visible elements. Can I use a css selector, or is there a more valid way of doing this?

Yes. The hide function only stores the current value of the display css property of your element, then set it to none. So the dom selectors will not be affected by it unless they try to match elements with a particular display css value.
Check it here.
Have a look at the jQuery hide function documentation.

Yes it will count hidden elements.

Yes, it just adds a display:none style to the element... .remove() on the other hand will not show up in counts. But that completely gets rid of it, and unless you store the value somewhere it is not retrievable.
What I'm assuming you want to do is to count the visible items. I would instead do the following:
$('.element').addClass('hide');
var count_of_visible_items = $('.element:not(".hide")').length;
console.log(count_of_visible_items);

Checking inherited visibility of DOM element with jQuery

If I have the HTML below:
<div style="display:none;">
<span id="hello">Hey</span>
</div>
And I do alert($("#hello").css("display"));, it will say "inline". The span is clearly not visible, but since it doesn't directly have a display:none; property on it, it still says it's viewable.
How do I test whether a certain DOM element is actually visible or not, even if its parent or a parent of its parent is not displaying?

You can use:
if ($('#myitem').is(':visible')){
/*Do some sort of stuff in here */
}
Items still animating (like using .hide or .fadeOut) will be "visible" until the animation is complete

You can use the :visible selector, and the is method:
if($("#hello").is(":visible")) {
//It's visible!
}
The is method returns a boolean value indicating whether or not any of the matched elements match that selector.

Use $(selector).is(':visible')

use the .is() function along with the :hidden or :visible psuedoselectors:
http://jsfiddle.net/jbabey/ucSVx/
$('#hello').is(':hidden')