Find span with specific class after input with jquery

jquery find by id
jquery find each
jquery find class in div
jquery descendant selector
jquery find first
jquery find element by class
jquery find input
jquery contents find

I would like to ask how to find a span element with a specific class.

The html is like this:

<input type="checkbox" class="checkBox">
<span class="one">One</span>
<span class="two">Two</span>

I am trying like this, but it doesn'work:

 $(".checkbox").on('click',function() {

                $(this).closest('span').find('.one').hide();  
            });

$(".checkBox").on('click',function() {
        $(this).siblings('span').each(function(){
           if($(this).hasClass('one'))
           $(this).hide()
        })                
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="checkBox">
<span class="one">One</span>
<span class="two">Two</span>

.find(), Search jQuery API Documentation Description: Insert content, specified by the parameter, after each element in This example inserts a <div> after each paragraph, with each new <div> containing the class name(s) of its preceding paragraph. Supported input includes DOM elements, jQuery objects, HTML strings, and� Browse other questions tagged javascript jquery jquery-selectors or ask your own question. The Overflow Blog The Overflow #20: Sharpen your skills

Two issues.

1) class="checkBox" != ".checkbox"

Classes are case sensative. You need to fix that.

2) The spans are not ancestors of the checkbox

They are siblings. closest() works by going up the DOM tree and looking for ancestors. It does not look for siblings. You can use siblings() to try to find the span.one

.after(), class selector. Description: Selects all elements with the given class. For class selectors, jQuery uses JavaScript's native getElementsByClassName() function if the browser <span class="myclass otherclass">span class="myClass"</span>. See the Pen jquery-practical-exercise-43 by w3resource (@w3resource) on CodePen. Contribute your code and comments through Disqus. Previous: Set value in input text using jQuery. Next: Find the class of the clicked element.

You can use jQuery's .siblings() selector:

$("input[type='checkbox']").on('click', function() {
  $(this).siblings('span.one').hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="checkBox">
<span class="one">One</span>
<span class="two">Two</span>

Class Selector (“.class”), Given a jQuery object that represents a set of DOM elements, the .next() method <li class="third-item">list item 3</li>. <li>list item 4</li>. <li>list item 5</li>. </ul>. If we begin at the third item, we can find the element which comes just after it: < meta charset="utf-8">. <title>next demo</title>. <style>. span {. color: blue;. Given a jQuery object that represents a set of DOM elements, the .next() method allows us to search through the immediately following sibling of these elements in the DOM tree and construct a new jQuery object from the matching elements. The method optionally accepts a selector expression of the same type that we can pass to the $() function

closest moves up in the dom, so use next.

$(".checkBox").on('click', function() {

  $(this).next('.one').hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="checkBox">
<span class="one">One</span>
<span class="two">Two</span>

next( [selector ] )Returns: jQuery, Given a jQuery object that represents a set of DOM elements, the .children() <li class="item-a">A</li> border: 1px solid transparent;. } p {. margin: 10px;. } span {. color: blue;. } input { Find all children with a class "selected" of each div. Prior to jQuery 1.9, .after() would attempt to add or change nodes in the current jQuery set if the first node in the set was not connected to a document, and in those cases return a new jQuery set rather than the original set. The method might or might not have returned a new result depending on the number or connectedness of its arguments!

.children(), :contains() Selector contains selector. Description: Select all elements that contain the specified text. <div>Malcom John Sinclair</div>. <div>J. Ohn</div>. Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

:contains() Selector, With .after() , the selector expression preceding the method is the container after which the content is inserted. With . <div class="inner">Goodbye</div>. </div>� The .hasClass() method will return true if the class is assigned to an element, even if other classes also are. For example, given the HTML above, the following will return true:

.insertAfter(), How to Cast a JSON Object Inside of TypeScript Class ? Given an HTML document and the task is to get the text of a <span> tag using JQuery. Method 1: Using jQuery text() Method: This method is used to set or return After clicking on the button: How to make a text input non-editable using jQuery ? The .after() and .insertAfter() methods perform the same task. The major difference is in the syntax—specifically, in the placement of the content and target. With .after(), the selector expression preceding the method is the container after which the content is inserted.

Comments
  • Are there multiple elements with the one class? If not, why find it? Why not just hide class one
  • This doesn't work because .closest() traverses upwards (ancestors), not laterally (siblings).
  • Why add the additional hasClass method and conditional when the selector can be span.one?
  • if not check it will hide all span
  • No.... if the siblings selector is span.one it will only find elements that match that. Doing the selector as just span is causing you to add in the additional conditional and method call which is logical bloat that is a bit of reinventing the wheel that the sibling selector can already do for you