Query - DOM Traversal

$('selector').find(childSelector)

// Find all paragraphs within a div
$('div').find('p').addClass('highlight');

$$('my-component').find('p').addClass('highlight');

$('selector').parent(parentSelector)

// Get the parent of a button
$('button').parent().addClass('button-group');

$$('my-component menu-item').parent().addClass('menu-styling');

$('selector').children(childSelector)

// Get all direct child list items of an unordered list
$('ul').children('li').css('color', 'red');

$('selector').siblings(siblingSelector)

// Get all siblings of a selected element
$('.selected').siblings().addClass('dimmed');

$$('my-component').find('.shadow-selected').siblings().addClass('shadow-dimmed');

$('selector').closest(ancestorSelector)

$('selector').closest(ancestorSelector, { returnAll: true })

// Find the closest form ancestor
$('input').closest('form').submit();

// Find all div ancestors
$('span').closest('div', { returnAll: true }).addClass('ancestor');

$$('my-component').find('input').closest('.shadow-form').addClass('validated');

$('selector').closestAll(ancestorSelector)

// Find all container ancestors
$('span').closestAll('.container').addClass('highlight');

// Find all form ancestors for all inputs
$('input').closestAll('form').addClass('has-inputs');

// Find all shadow DOM containers
$$('input').closestAll('.shadow-container').addClass('shadow-highlight');

$('selector').next(nextSelector)

// Get the next sibling of a paragraph
$('p').next().css('margin-top', '20px');

$$('my-component').find('.shadow-paragraph').next().css('margin-top', '10px');

$('selector').prev(prevSelector)

// Get the previous sibling of a heading
$('h2').prev().css('color', 'red');

$$('my-component').find('.shadow-heading').prev().css('margin-bottom', '5px');

$('selector').find('childSelector').end()

// Allows working with different levels in the DOM without making multiple selections
$('.card')
  .addClass('highlighted')         // Add class to cards
  .find('.title')                  // Switch to titles within cards
    .css('font-weight', 'bold')    // Bold the titles
    .end()                         // Go back to the card selection
  .find('.content')                // Now find content within cards
    .html('<p>New content</p>');   // Change the HTML

$('selector').filter(filterSelector)
$('selector').filter(function)

// Filter paragraphs to only those with class 'highlight'
$('p').filter('.highlight').css('background', 'yellow');

// Filter list items to only those with text containing 'important'
$('li').filter(function() {
  return $(this).text().includes('important');
}).addClass('priority');

$('selector').not(notSelector)
$('selector').not(function)

// Select all paragraphs except those with class 'exclude'
$('p').not('.exclude').css('color', 'blue');

// Select all list items except empty ones
$('li').not(function() {
  return $(this).text().trim() === '';
}).addClass('visible');

$('selector').is(testSelector)
$('selector').is(function)

// Check if any paragraph has class 'active'
if ($('p').is('.active')) {
  console.log('At least one paragraph is active');
}

// Check if any input is empty
if ($('input').is(function() {
  return $(this).val() === '';
})) {
  console.log('At least one input is empty');
}

$('selector').index()
$('selector').index(element)

// Get the index of the first selected element
const index = $('li.selected').index();
console.log(`Selected item is at index: ${index}`);

// Get the index of a specific element within the selection
const specificIndex = $('li').index($('li.highlight'));
console.log(`Highlighted item is at index: ${specificIndex}`);

$('selector').contains(element)

// Check if a div contains a specific paragraph
const $div = $('#container');
const $paragraph = $('#content-para');

if ($div.contains($paragraph[0])) {
  console.log('Container holds the paragraph');
}

// Check if any card contains clicked element
$('.card').each(function() {
  if ($(this).contains(event.target)) {
    console.log('Click happened inside this card');
  }
});