In the interest of keeping a separation of concerns, here's an jQuery function that will either locate an existing element or create a new element.

### So just include this jQuery anywhere:



    $.fn.upsert = function(selector, htmlString) {
      // upsert - find or create new element
      // find based on css selector   	https://api.jquery.com/category/selectors/
      // create based on jQuery()       http://api.jquery.com/jquery/#jQuery2
      var $el = $(this).find(".message");
      if ($el.length == 0) {
        // didn't exist, create and add to caller
        $el = $("<span class='message'></span>");
        $(this).append($el);
      }

      return $el;
    }; 

### Then you could use like this:



    $("input[name='choice']").click(function(){
      var $el = $(this).closest("form").upsert(".message", "<span class='message'></span>");
      // guaranteed to have element - update if we want
      $el.html("You've chosen "+this.value)
    })

Ideally, it would be nice to simply pass in a selector and have jQuery create an element that matches that selector automatically, but it doesn't seem like there's a light weight vehicle for [creating an element][create] based off the CSS Selector syntax (based on [Question 1][Q1] & [Question 2][Q2]).

Some further enhancements might provide more fine tuned control for [DOM insertion][DOM] instead of just always using [`.append()`][append].

### [Demo in jsFiddle][fiddle] |  Demo in Stack Snippets:





    $.fn.upsert = function(selector, htmlString) {
      // upsert - find or create new element
      // find based on css selector   	https://api.jquery.com/category/selectors/
      // create based on jQuery()       http://api.jquery.com/jquery/#jQuery2
      var $el = $(this).find(".message");
      if ($el.length == 0) {
        // didn't exist, create and add to caller
        $el = $("<span class='message'></span>");
        $(this).append($el);
      }

      return $el;
    }; 

    $("input[name='choice']").click(function(){
      var $el = $(this).closest("form").upsert(".message", "<span class='message'></span>");
      // guaranteed to have element - update if we want
      $el.html("You've chosen "+this.value)
    });





    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <form action="">
      <div>
        <input type="radio" id="ca" name="choice" value="A" /><label for='ca'>A</label>
        <input type="radio" id="cb" name="choice" value="B" /><label for='cb'>B</label>
        <input type="radio" id="cc" name="choice" value="C" /><label for='cc'>C</label>
      </div>
    </form>






[fiddle]: https://jsfiddle.net/KyleMit/z13swd33/
[Q1]: https://stackoverflow.com/q/3518650/1366033
[Q2]: https://stackoverflow.com/q/10586678/1366033
[create]: http://api.jquery.com/?s=createElement()
[append]: http://api.jquery.com/append/
[DOM]: http://api.jquery.com/category/manipulation/dom-insertion-inside/

if I have this html  

    <div>
      <p>1</p>
    </div>
    
    <div>
      <p>1</p>
      <p>2</p>
    </div>

and this jquery

    $('div').each(function () {
        $(this).find('p').eq(1).html('test');
    });

i get this

    <div>
      <p>1</p>
    </div>
    
    <div>
      <p>1</p>
      <p>test</p>
    </div>

what jquery should I use to get this instead?

    <div>
      <p>1</p>
      <p>test</p>
    </div>
    
    <div>
      <p>1</p>
      <p>test</p>
    </div>

there is no match for `eq(1)` on the first div so it just skips it. how can I add a child if none exists or update it if one does exist, without having to split the jquery into several statements?

jquery create new child, or update existing child

The problem with getting the `length` property on `filter()` is that jQuery will evaluate every single element in the collection, just to populate a count when all we care about is whether the value is greater than zero.

None of the current answers and even jQuery's own [`.is()`][1], [`.has()`][2], and [`.filter()`][3] make use of short circuiting as soon as the criteria is met.


You can define a simple extension method called `.any()` like this: 



    jQuery.fn.any = function(filter){ 
    	for (i=0 ; i<this.length ; i++) {
      	 if (filter.call(this[i])) return true;
      }
      return false;
    };


And then pass in a filtering function like this:


	
    var someInputsEmpty = $("#reference,#pin,#fName,#mName,#datepicker").any(function() { 
        return this.value == '';
    });





    jQuery.fn.any = function(filter){ 
    	for (i=0 ; i<this.length ; i++) {
      	 if (filter.call(this[i])) return true;
      }
      return false;
    };

    $(function() {
    	
      var gotMatch = $(":input").any(function() { 
                       return this.value == 'hi';
                     });

      if (gotMatch) {
        console.log("Hello to you too!");
      } else {
      	console.log("Why don't you say Hi!");
      }
      
    })




    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <input type="text" value="">
    <input type="text" value="">
    <input type="text" value="">







### Further Reading:

* [Jquery check form to see if any inputs has value][4]
* [Is there an "exists" function for jQuery?][5]
* [Jquery check form to see if any inputs has value][6]

[1]: http://api.jquery.com/is/
[2]: https://api.jquery.com/has/
[3]: http://api.jquery.com/filter/
[4]: https://stackoverflow.com/q/10413716/1366033
[5]: https://stackoverflow.com/q/31044/1366033
[6]: https://stackoverflow.com/q/10413716/1366033

I want to ask if there's a better way in jQuery to select multiple text input then check if any of them has a value. Here's my code: 

    if ($("#reference").val() != "" || $("#pin").val() != "" || $("#fName").val() != "" || $("#mName").val() != "" || $("#datepicker").val() != "") { /*logic goes here */ }



jQuery check if any text input has value

## Problem

Unfortunately, the reason you can't use the solution from [How can I refresh a stored and snapshotted jquery selector variable][1] is not because you've implemented anything incorrectly, but just because the solution is deprecated.

The former solution relies on the internal [`.selector`][2] property which was deprecated in v1.7 and removed in v3.0

> **Note**: This API has been removed in jQuery 3.0. The property was never a reliable indicator of the selector that could be used to obtain the set of elements currently contained in the jQuery set where it was a property, since subsequent traversal methods may have changed the set. 

## Solution

I think the simplest solution is just redo the selector query from scratch.  No real performance difference between that and "refreshing" the query which will have to do the same thing anyway.  You'll end up with a *little* duplicate code, but most of the other solutions require much more indirection and complexity.

So instead of relying on a shared variable in multiple places like this:

```js
var selector = $(".div2");

function Remove() {
  selector.refresh();
  selector.remove();
}

function Add() {  
  selector.refresh();
  selector.append($main);
}
```

Instead, use inline like this:

```js
function Remove() {
  $(".div2").remove();
}

function Add() {  
  $(".div2").append($main);
}
```


[1]: https://stackoverflow.com/q/11868899/1366033
[2]: https://api.jquery.com/selector/

I have a selector stored in a variable. The content in the page changes dynamically, the problem I'm facing was when the content was removed then the cached selector didn't work. How can I re-evaluate or refresh the selector?
https://jsfiddle.net/qehdvedd/

    var selector;
    function Remove(){	
    selector.refresh();
      selector.remove();
    }
    
    function Add(){
    	$("#div1").append('<div class="div2">New content</div>');
    }
    
    $(document).ready(function () {
        selector = $(".div2");
    });
    
    $.fn.refresh = function() {
        return $(this.selector);
    };

I also referenced (https://stackoverflow.com/questions/11868899/how-can-i-refresh-a-stored-and-snapshotted-jquery-selector-variable) but it does not work.
I'm aware of the alternative solutions like storing the selector name as a string and calling it with jquery.

**Edit**:
I will tell the exact scenario. I'm working on a spa website, in that if I clicked an element and go to next page in the spa. Then if I pressed Esc or back button I need to focus the last selected item also need to add a class to show which is selected. I will store the selector in a variable to know the last selected item when the element is clicked. And if the Esc key is pressed then I will focus on the variable which stored the last selected item. But due to spa the contents are removed and added dynamically. So this solution doesn't seem to work. I can't use the alternative solutions like storing the selector name as a string and calling it with jquery. Because there are too many items present on the page, so adding every item with Id is not practical.
Sample: http://jsfiddle.net/2v78hmb5/