Does jQuery have a method called .findUsingParent() that can be used for searching elements?

Question

Does jQuery have a method called .findUsingParent() that can be used for searching elements?

div.tabs serves as a container for tab control. Each individual tab is represented by div.tab, which is a child of div.tabs. The currently active tab is identified by div.tab.active.

.data represents an element that can exist within any div.tab, or even directly within the body if there are no .tab elements present.

Task:

If there is a .tabs element, select all .data elements that are children of .tab.active.
If there are no .tabs elements, simply select all .data elements.

I have created two versions to achieve this:

    // First version
    var data;
    if ($('.tabs').length) {
        data = $('.tab.active .data');
    } else {
        data = $('.data');
    }
    // Section version
    var data = $('*');
    if ($('.tabs').length) {
        data = data.find('.tab.active');
    }
    data = data.find('.data');

However, I am curious if there exists a function s.findUsingParent(e) in jQuery that would select elements which are children of e from a set of elements s:

// Expect
var data = $('data');
if ($('.tabs').length) {
  data = data.findUsingParent('.tab.active');
}

Does such a function already exist in jQuery?
Is there a CSS-only solution to this problem?

javascript jquery html css

Answer 1

Answer №1

One method to narrow down elements with a parent of .tab.active is by utilizing the .filter() function:

var items = $('items');
if ($('.tabs').length) {
  items = items.filter(function(){
      return $(this).closest('.tab.active').length != 0;
   });
}

Answer 2

One method to narrow down elements with a parent of .tab.active is by utilizing the .filter() function:

var items = $('items');
if ($('.tabs').length) {
  items = items.filter(function(){
      return $(this).closest('.tab.active').length != 0;
   });
}

Does jQuery have a method called .findUsingParent() that can be used for searching elements?

Answer №1

Similar questions

What are the best methods for testing a function containing multiple conditional statements?

Tips for retrieving the value of the current point in a dynamic line chart with Chart JS using JavaScript

Using base64 encoding and setting the binary type for Websockets

How to organize the cpuinfo output in BASH

What is the best way to create a mirror effect on one div by clicking another div?

"Preventing the default behavior with e.preventDefault is causing issues with the functionality of my

Guide on how to assign a masterpage DOM element to a content page using JavaScript

Exploring the Next.js Route API to Retrieve and Utilize Request Body Data

Leveraging the ReactJS Hook useState for detecting Key press events

What is the best way to semantically associate a heading with an unordered list in HTML?

Switch between different data objects using ajax

Transmit JSON data to a node.js server

What to do when mysqli_query($connect, $query) is returning false?

The table's width exceeds the appropriate size

Is there a way to execute a callback function once the page has finished loading through AJAX in

Transform an array into a string with spaces in between each value by combining the elements

What is the best way to indicate a particular element within a subdocument array has been altered in mongoose?

Disregard IDs when linting CSS in ATOM

Moving PHP array values between two different sections on a webpage using the transfer (add/remove) method

The method .depth() does not exist within this context