Find closest similar siblings

Question

I want to be able to click on the , the , or the

and get all the

s.

The point is to detect the closest repetitive element no matter how deep in it's children you click.

This is what I have so far: It shows the count of the siblings but what I'd like to isolate is same-ness.

For example: shows 2 siblings but they are not both .
shows 4 but they not all
. How do I only count same siblings. In this case
but can be anything.

//Run in full-page↗️

$('body').on('click', (e) => { $el = $(e.target); $parentsAndSelf = $el.parents().addBack(); $parentsAndSelf.each( (i,el) => { if( $(el).siblings().addBack().length > 1){ console.log( el, $(el).siblings().addBack().length ); //return false; } }); });

* { padding: 5px; margin:5px; outline: 1px solid pink; list-style-position: inside; } a { display: block } .highlight{ background:yellow; } *:hover { outline: 1px solid red; }

HEADER: NAV: UL: li item 1 li item 2 li item 3 li item 4

user_7158959 · Answer

This really got me occupied hehe.

So if:

The point is to detect the closest repetitive element no matter how deep in it's children you click.

It means:

you have to get parent of clicked element
search for its children, if any, get its tag-names (types), react if two are the same
if not, move to next parent, do the same

I want to be able to click on the , the , or the
and get all the
s.

Example:

let num document.addEventListener("click", function(event) { num = 1; let el = event.target let s check(s, el) }) function check(s, el) { console.clear() // jumping parents part and getting only first level children let ss = ".parentNode" s = "el" + ss.repeat(num) + ".children" // map tagnames let c = [...eval(s)].map(type => type.tagName) // isolate duplicates part const yourArray = c const yourArrayWithoutDuplicates = [...new Set(yourArray)] let duplicates = [...yourArray] yourArrayWithoutDuplicates.forEach((item) => { const i = duplicates.indexOf(item) duplicates = duplicates .slice(0, i) .concat(duplicates.slice(i + 1, duplicates.length)) }) // if no duplicates call this same function just add num++ to add .parentNode // it will loop unitl it hits 2 same tagnames on same level, sibilings duplicates.length === 0 ? (num++, check(eval(s), el)) : (console.log("Repeting element :" + duplicates[0]), console.log("Repets: " + (parseInt(duplicates.length) + 1)), console.log("Position from clicked element: " + s)) }

* { padding: 5px; margin: 5px; outline: 1px solid pink; list-style-position: inside; } a { display: block } .highlight { background: yellow; } *:hover { outline: 1px solid red; }

1 2 HEADER: NAV: UL: li item 1 li item 2 li item 3 li item 4

EDIT:

And here is a bit more simplified version still following same logic:

let num document.addEventListener("click", function(event) { num = 1; let s check(s, event.target) }) function check(s, el) { console.clear() const ss = ".parentNode" s = "el" + ss.repeat(num) + ".children"; let count = {}; [...eval(s)].map(type => type.tagName).forEach( i => {count[i] = (count[i] || 0) + 1}) const max = Math.max.apply(null, Object.values(count)); max <= 1 ? (num++, check(eval(s), el)) : (console.log("Repeting element :" + Object.keys(count)[0]), console.log("Repets: " + max), console.log("Position from clicked element: " + s)) }

* { padding: 5px; margin: 5px; outline: 1px solid pink; list-style-position: inside; } a { display: block } .highlight { background: yellow; } *:hover { outline: 1px solid red; }

1 2 HEADER: NAV: UL: li item 1 li item 2 li item 3 li item 4

user_383904 · Answer

Let me start with a pretty simple JavaScript idea before presenting the jQuery one:

JavaScript - Get first closest multiple siblings

This could be easily made by using Element.querySelectorAll() with a ":scope >" query for immediate child elements of the same Element.tagName, and a recursive function:

const closestMultiple = el => {
  const par = el.parentElement;
  const sib = par && par.querySelectorAll(`:scope > ${el.tagName}`);
  return (sib && sib.length > 1 ? sib : par && closestMultiple(par))
}

document.body.addEventListener("click", (ev) => {
  const cm = closestMultiple(ev.target)
  if(cm) cm.forEach(EL => EL.classList.toggle("highlight"));
});

* {
  padding: 5px;
  margin: 5px;
  outline: 1px solid pink;
  list-style-position: inside;
  background: #fff;
}
*:hover {
  outline: 1px solid red;
}

a {
  display: block
}

.highlight {
  background: yellow;
}


  
    HEADER:
  
  
    
      NAV:
      
        UL:
        li item 1 
        li item 2 
        li item 3 
        li item 4

jQuery - Get first closest multiple siblings

Invert the array using .reverse() to speed up the process starting from the Target Element (instead of document).
Stop the loop as soon as Array.prototype.some() matches the length > 1 criteria:

function closestMultiple(el, $mu) {
  return $(el).parents().addBack().get().reverse().some(el => {
    const $gr = $(el).siblings(el.tagName).addBack();
    return ($gr.length > 1 ? $mu = $gr : 0);
  }) && $mu || $();
}

function closestMultiple(el, $mu) {
  return $(el).parents().addBack().get().reverse().some(el => {
    const $gr = $(el).siblings(el.tagName).addBack();
    return ($gr.length > 1 ? $mu = $gr : 0);
  }) && $mu || $();
}

$(document).on('click', (ev) => {
  const $clRep = closestMultiple(ev.target).toggleClass("highlight");
  console.clear(); console.log($clRep.length +" "+ $clRep.prop("tagName"));
});

* {
  padding: 5px;
  margin: 5px;
  outline: 1px solid pink;
  list-style-position: inside;
  background: #fff;
}
*:hover {
  outline: 1px solid red;
}

a {
  display: block
}

.highlight {
  background: yellow;
}


  
    HEADER:
  
  
    
      NAV:
      
        UL:
        li item 1 
        li item 2 
        li item 3 
        li item 4

jQuery micro-plugin

For a nicer experience (since you're already using jQuery) you could extend the jQuery constructor with your own .closestMultiple() method.
Here's a suggestion for a Micro-plugin:

$.fn.closestMultiple = function($mu) {
  return this.parents().addBack().get().reverse().some(el => {
    const $gr = $(el).siblings(el.tagName).addBack();
    return ($gr.length > 1 ? $mu = $gr : 0);
  }) && $mu || $();
}

$(document).on('click', (ev) => {
  $(ev.target).closestMultiple().toggleClass("highlight");
});

* {
  padding: 5px;
  margin: 5px;
  outline: 1px solid pink;
  list-style-position: inside;
  background: #fff;
}

a {
  display: block
}

.highlight {
  background: yellow;
}

*:hover {
  outline: 1px solid red;
}


  
    HEADER:
  
  
    
      NAV:
      
        UL:
        li item 1 
        li item 2 
        li item 3 
        li item 4

user_8939058 · Answer

I think this simple way may help you:

  $("i, a, li").on('click', function(event) {
      var closest_li = $(this).closest('ul').find('li');

      console.log(closest_li);
  });

So you will get array of all

elements which exist in parent

Find closest similar siblings

3 Answers

JavaScript - Get first closest multiple siblings

jQuery - Get first closest multiple siblings

jQuery micro-plugin