Is it possible to make an element invisible to jquery

Question

I have two input fields fields with the same class, one display:none. I want to query the value of the input field that is NOT display:none.

EDIT (with example)

<div id="Parent1" style="display:none">
  <p>
    <input type="text" class="title" value="">
  </p>
</div>

<div id="Parent2">
  <p>
    <input type="text" class="title" value="this is the one I want">
  </p>
</div>

js

$('.title').val();

Returns blank since the first title class is empty. I want to ignore the first title who's parent is display:none.

Regarding your question, your title is quite confusing... – A. Wolff Nov 27 '15 at 14:30 — A. Wolff, Nov 27 '15 at 14:30

score 4 · Accepted Answer · edited Jun 20 '20 at 09:12

4

Use :visible selector to select element which are not hidden.

$('.class:visible')

Note:(from docs)

Elements are considered visible if they consume space in the document. Visible elements have a width or height that is greater than zero.

Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout.

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 27 '15 at 14:26

Tushar

85,780
21
159
179

To select elements which are not visible, use [:hidden selector](https://api.jquery.com/hidden-selector/) – Tushar Nov 27 '15 at 14:31
Perfect, thank you. Changing my js to `$('.title:visible').val();` does the trick – Mark Kenny Nov 27 '15 at 14:43

score 0 · Answer 2 · answered Nov 27 '15 at 14:27

0

there is a :visible selector in jquery (and a :not() selector, .i.e :not(:visible))

answered Nov 27 '15 at 14:27

birdspider

3,034
1
16
25

score 0 · Answer 3 · answered Nov 27 '15 at 14:40

Since you have two elements, you must iterate trough them and find the hidden one. I see this process convincing for me:

$('.class_el').each(function(el){
      if(el.hidden)
        //do something
});

You can also use the :visible selector, like !$(el).is(':visible') instead of reading the property of the element.

It's your choice! Cheers!

Is it possible to make an element invisible to jquery

3 Answers3