Verify whether the division contains any elements and does not include specific elements

I previously opened a similar thread, but with the condition that the div does not contain a second element within it. So my previous question was as follows:

I have some code that looks like this:

<p class="elementWrap">
  <label>Phone</label>
  <input class="form_elem" type="text" name="form_phone">
  <span class="form_required">*</span>
</p>

and sometimes like this:

<p class="elementWrap">
  <label>Name</label>
  <input class="form_elem" type="text" name="form_name">
</p>

rgraham provided this solution which works well:

$(".elementWrap").filter(function() {
    return $(this).children(".form_required").length;
}).find("label").css({'width':'auto','margin':'0px'});

Now, I want to modify this code to exclude labels with inputs of type Radio. I'm thinking about something like returning the length of children with the class .form_required and not input type radio. However, I'm unsure of how to write this in code. =/

Answer №1

$(".elementWrap").filter(function() {
    var contains_required = $(this).children(".form_required").length > 0,
        no_radiobutton = $(this).find(':radio').length < 1;

    return contains_required && no_radiobutton;
})

Answer №2

According to the Jquery Documentation:

<!doctype html>
<html lang="en>
<head>
    <meta charset="utf-8">
    <title>example</title>
    <style>
        .full {
            border: 1px solid red;
        }
    </style>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<ul>
    <li>Is there an LI element inside the UL?</li>
</ul>
<script>
    $("ul").append("<li>" +
        ( $("ul").has("li").length ? "Yes" : "No" ) +
        "</li>");
    $("ul").has("li").addClass("full");
</script>
</body>
</html>

http://api.jquery.com/has/

Answer №3

$(".elementWrap:has(.form_required)").not(":has(:radio)")

It is important to note that the combination of $one.filter($two) is similar to $one ∩ $two

Check out the DEMO here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display the progress bar's completion percentage during animation

Creating a progress bar using HTML with the following structure: <div class="progressbar"><div class="text">%0 Completed</div> <div class="progressbar_inner"></div> </div> Implemented jQuery code fo ...

The resource in CosmosDB cannot be found

I have successfully stored documents on Cosmos, but I am encountering an issue when trying to retrieve them using the "read" method. this.cosmos = new CosmosClient({ endpoint: '' key: '' }); this.partitionKey = '/id' thi ...

The chosen date is not preserved within the select box

I have these specific items: $scope.items = [{"date":"2014-12-26T05:00:00.000Z","display":"6:00"}, {"date":"2014-12-26T05:15:00.000Z","display":"6:15"}, {"date":"2014-12-26T05:30:00.000Z","display":"6:30"}] When I use the following code: <select ...

Issues with ngresource failing to properly filter data when calling an oData based Rest Controller

My web API controller is built with MongoDb as the backend. public class NodesRestController : ApiController { private INodeService _nodeService; public NodesRestController(INodeService nodeService) { _nodeService = nodeService; ...

Insert a THREE.Points element into the scene: Error in THREE.Object3D.add: The object being added is not a valid instance of THREE.Object3D (

Trying to incorporate a system of particles, a THREE.Points element into the scene has resulted in the following error: "THREE.Object3D.add: object not an instance of THREE.Object3D. undefined" The code used for this is as follows: var backCount = 1800; ...

Adding a class to a child component layout from a parent component in Angular 12 and Typescript can be achieved by using the ViewChild decorator

Incorporating the child component into the parent component is an important step in the structure of my project. The dashboard component serves as the child element, while the preview component acts as the parent. Within the parent (preview) component.htm ...

What is the best way to submit a form and display results without refreshing the page?

Imagine having two div elements within a document. The first div serves as the control element, while the second one is designated for displaying a preview of the user's input. HTML <div id="workHere"> <form id="workForm" action="php/crea ...

Can a div section be defined and then filled with data in the same document?

Is it possible to initially declare a div section and later populate it with content in the same document? The following dummy code snippet illustrates the query... <div name="xyz" style="..."> <!-- Empty --> </div> < ... INTO "x ...

Issue with consistent search autocomplete feature in a stationary navigation bar using bootstrap technology

My issue is with the autocomplete box - I want it to have the same width as the entire search box. Something like this using Bootstrap's col-xs-11 class: https://i.sstatic.net/npzhC.png If I set the position to "relative," it looks like this (all st ...

Please explain this ES6 syntax to me: Using a colon after a function call

While exploring the documentation for a flux store in React, I came across an example that caught my attention. import {ReduceStore} from 'flux/utils'; class CounterStore extends ReduceStore<number> { getInitialState(): number { ret ...

Using Firefox to cache Ajax calls after navigating back in the browsing history

Currently, I am utilizing an ajax call to invoke a php script that waits for 40 seconds using sleep and then generates the output RELOAD. Subsequently, in JavaScript, the generated output is validated to be RELOAD, following which the call commences again. ...

Is it possible to modify the object's key value when generating an array value with the map function in React?

I have the array object data stored in a variable called hi[0].child. hi[0].child = [ {code: "food", name: "burger"}, {code: "cloth", name: "outer"}, {code: "fruit", name: "apple"}, ] ...

jQuery fails to locate class following AJAX reply

In my application, there is a cart feature where users can remove items from their cart, triggering a refresh of the contents using AJAX. However, I noticed that after removing an item from the cart, the response switches from asynchronous to synchronous m ...

Switch between visibility of objects with toggle button

I have set a background image on the body, and positioned a large box, footer, navigation bar, and header above it. In order to add functionality to slide these elements up and down, I've created two buttons with classes 'slideUp' and &apos ...

How to automatically scroll to the most recently added element in an *ngFor loop using Angular 2

In my web page, I have a dynamic list rendered using an ngFor loop. Users can add or remove elements from this list by clicking on a button. What I want to achieve is to automatically scroll the browser view to the latest element added when a user clicks o ...

Error Message: Unhandled TypeError - Unable to access property 'setState' as it is null in React

Encountering an issue on my React page where I receive the error: Uncaught TypeError: Cannot read property 'setState' of null specifically when trying to use the counter component. The problem seems to originate from the usage of this inside th ...

Adjust the placement of a small division within a larger resizable division without affecting the contents of the container

Check out this JSFiddle I created: http://jsfiddle.net/asaakius/5nGYS/7/ In the code, you'll see a small div with the id #menu containing the letter "v". When I remove this div, the textarea and textbox align perfectly and resize together seamlessly. ...

Troubles arise when hovering over and connecting endpoints in jsPlumb

I'm currently facing two challenges with my project. Follow this link for more details. 1) The hover effect is working perfectly on the endpoints, but I can't seem to change the colors of my connector when hovering over it. Any suggestions? (Ref ...

Handling image errors in jQuery for responsive design queries

Images on my website change based on the screen size using media queries. I am looking for a way to handle errors that may occur using jQuery. I want to display a text message if the image fails to load. Here is the code I have so far: <div class="con ...

Styling for dropdown menu button

I'm encountering an issue with a button styled dropdown. Here is the code snippet: <template> <div class="datatable-wrapper"> <div class="table-container"> <table class="table datatable-table i ...