jQuery selecting direct "parents", not similar

Question

I got a fixed structure of a table like this one:

I want to select every lvl parent. That means I want to select every lvl previously from the selected. Except similar. That means in this example it would be 6 and 1

I tried it with this:

var ss = [];
for(var l = lvl; l <= 5; l++){
    ss.push('td.lvl-'+l);
}
var ul = jQuery('table').find(ss.join(',')).closest('tr');
var pa = jQuery('.selected').closest('tr').prevAll('tr').not(ul);

But it also select number 2

// EDIT

I have a jsfiddle http://jsfiddle.net/g7yhwojg/3/ selected should be:

14
13
10
1

David Thomas · Accepted Answer

While you've already posted your own answer, I thought I'd offer an alternative, in case you're interested:

// caching the selected element (selecting by its id):
var selected = $('#selected'),

// caching the regular expression, in case it might be
// be needed again later; this matches a serious of
// one or more (+) numbers (\d) at the end of the
// string ($):
    levelRegex = /\d+$/,

// finding the numbers at the end of the selected
// element's class attribute, and using parseInt()
// to convert that to a number in base-10:
    selectedLevel = parseInt(selected.attr('class').match(levelRegex), 10),

// caching the selected element's closest ancestor
//  element:
    selectedParent = selected.closest('tr'),

// caching the  elements before the selectedParent:
    rowsBefore = selectedParent.prevAll(),

// using map() to iterate over those elements and
// if their child  element has a class equal to
// 'lvl-' + (selectedLevel - 1)
// we first decrement selectedLevel, and then
// return the text of the current  element;
// decrementing here means we can only ever
// retrieve the first instance of an element
// with a 'lower' level:
    pseudoParents = rowsBefore.map(function (i) {
        if ($(this).find('td').hasClass('lvl-' + (selectedLevel - 1))) {
            --selectedLevel;
            return this.textContent;
        }

// converting the 'map' into a native Array:
    }).get();

console.log(pseudoParents);
// ["14", "13", "10", "1"]

var selected = $('#selected'),
  levelRegex = /\d+$/,
  selectedLevel = parseInt(selected.attr('class').match(levelRegex), 10),
  selectedParent = selected.closest('tr'),
  rowsBefore = selectedParent.prevAll(),
  pseudoParents = rowsBefore.map(function(i) {
    if ($(this).find('td').hasClass('lvl-' + (selectedLevel - 1))) {
      --selectedLevel;
      return this.textContent.trim();
    }
  }).get();

// snippet logs to the bottom of the result panel:
snippet.log(pseudoParents);

// logs to the console (obviously):
console.log(pseudoParents);
// ["14", "13", "10", "1"]

.lvl-0 {
  padding-left: 10px;
}
.lvl-1 {
  padding-left: 30px;
}
.lvl-2 {
  padding-left: 50px;
}
.lvl-3 {
  padding-left: 70px;
}
.lvl-4 {
  padding-left: 90px;
}
.lvl-5 {
  padding-left: 110px;
}
body {
  color: #ffffff;
  background: #000000;
}

External JS Fiddle demo, for experimentation and development.

Note that in both the Stack Snippet, and the JS Fiddle, I've corrected the HTML to close the elements, otherwise the erroneous tags at the end of each line of the

was creating a new, empty, for no reason.

References:

JavaScript:
jQuery:
- attr().
- closest().
- get().
- map().
- prevAll().

jQuery selecting direct "parents", not similar

Answers (2)

Related Questions

jQuery selecting direct &quot;parents&quot;, not similar

Answers (2)

Related Questions

jQuery selecting direct "parents", not similar