How can I get the the Nth parent of multiple elements?
Right now I do it like this:
var winners = THUMBNAILS.find(".tournament-winner:contains(" + filter + ")");
var filteredThumbnails = winners.parent().parent().parent().parent().clone();
this does work.
But when I try to do it like:
var filteredThumbnails = winners.parents().eq(3).clone();
It only gets the thumbnail (great grandfather) of just one element in the winners variable.
Is there any easier way to get Nth parent of multiple elements?
You can use .add()
Create a new jQuery object with elements added to the set of matched elements.
//Create empty object
var filteredThumbnails = $();
//Iterate and target parent
winners.each(function(){
filteredThumbnails.add($(this).parents().eq(3).clone());
});
write a .map() or .forEach() function on the winners array.
example:
filteredThumbnails = winners.map(winner => winner.parent().parent().parent().parent().clone());
It would be a lot easier if you shared your html.
As i am not sure what you are trying to achieve...but
Another way of getting up multiple parent levels of the element you are targeting,
which doesn't have a unique name would be like below. which will traverse up until it finds a parent which has an id which starts with "parent".
winners.parents("[id^=parent]")
Although i would give them a generic css class to travel up to rather than this.
You can also use filter on return value of parents.
$.parents return an array.
Let's say you have the following HTML and you want to get divs with ids parentN. which is the third parent. After that you can convert the elements to an array. Alternatively, you can create a function like this and use it in different places.
then you have to get every fourth element of the parents
function getNthParents(obj, N) {
return obj.parents().filter(index => !((index + 1) % N)).toArray();
}
nthParents = getNthParents($('.thumbnail'), 3)
console.log(nthParents)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='parent1'>
<div>
<div>
<div class='thumbnail'>
</div>
</div>
</div>
</div>
<div id='parent2'>
<div>
<div>
<div class='thumbnail'>
</div>
</div>
</div>
</div>
<div id='parent3'>
<div>
<div>
<div class='thumbnail'>
</div>
</div>
</div>
</div>
Related
Is there a way to select the deepest child in each branch (specifically divs) in cheerio?
Example:
<div id="parent">
<div>
<div id="dontSelectThisSinceThereIsADeeperDiv"></div>
<div>
<div id="selectThis"></div>
</div>
</div>
<div id="selectThisAlso"></div>
<div>
<div id="selectThisAsWell"></div>
</div>
</div>
Basically, all the divs that I want to select are the deepest within their "branch" from the parent. Is there a way to possibly do this in cheerio?
It doesn't look like there is a single function to do what you require. But you can create your own function by utilising different cheerio functions. For a recursive example (not tested, but hopefully you get the idea):
function getLeaves(parent, result = []) {
let children = $(parent).children()
if(children.length > 0){
children.each((i, elem) => getLeaves(elem, result))
}else{
result.push(parent)
}
return result
}
let leaves = getLeaves('#parent')
Scenario is to copy #first inside #test, below are the 2 scenarios of implementing it and which is the best way of implementation and why?
<div class="first">
<div class="second">1</div>
</div>
<div class="test">
<div>--------------</div>
</div>
JQUERY1:
var cloner = $('.first').clone().prop({
'class': 'changed_first'
});
$('.test').append(cloner)
$('.changed_first > .second').attr('class', 'changed_second');
$('.changed_first > .second').html('2');
Detour question on JQUERY1: Is there a possibility in the clone method to change the properties of inner elements?
JQUERY2:
$('.test').append('<div class="changed_first"><div class="changed_second">2</div></div>');
your 1st method of using clone will be a good one.
And yes you can manipulate the cloned elements before you bind it to dom.
If you want to access any id or class to cloned element before you bind if to anywhere, you can do like
var cloner = $('.first').clone().prop({
'class': 'changed_first'
});
cloner.find('#id').css('something','css-value');
var data_id = cloner.find('.class').attr('data-bind');
I want to delete element with class "tehnicneinfo" but only if the element I'm checking ( with class "h2size") has no child. I have a bunch of those elements, generated by a plugin and I want to delete only the ones that have the next element without child. I wrote jquery code, but it delets all of my elements, not only the ones that have the next element without child. Here is my jquery code:
$('.news .h2size > div').each(function() {
var ul = $(this).find('ul');
if(!ul.length) $(this).remove();
var h1 = $('.news').find('.tehnicneinfo');
var h2size = $('.news').find('.h2size');
if(h2size.prev().is(':empty'))
{
h1.remove();
}
});
this code is inside $(document).ready(function(). Can you tell me what I'm doing wrong? The code is for something else also, so I'm having truble only from var h1 = $('.news').find('.tehnicneinfo'); this line on. Thanks in advance!
Html:
<div class="news">
<h1 class="tehnicneinfo">xxx</h1>
<div class="h2size">
<div id="xyxyxy">
.......
</div>
</div>
<h1 class="tehnicneinfo">yyy</h1>
<div class="h2size"></div>
....
</div>
That's the html, only that there is like 20 more lines that are the same, but with different values (not yyy and xxx). I would need to delete all 'yyy' (they are not all with same value).
You can use filter to filter the ones you want to remove then remove them
"I want to delete only the ones that have the next element without child"
$('.tehnicneinfo').filter(function(){
return !$(this).next().children().length;
// only ones with next sibling with no children
}).remove();
JSFIDDLE
I have the following code:
.recipe
.ingredients
= f.simple_fields_for :ingredients do |ingredient|
= render 'ingredient_fields', f: ingredient
.row#links
.col-xs-12
= link_to_add_association "", f, :ingredients
%hr
I need to select the ingredients div using jquery in the format of $("#links")["closest"](".recipe > .ingredients") but this doesn't select anything.
It's frustrating though as $("#links")["closest"](".recipe > .row") will return the correct div.
Fiddle of what works and what I want: https://jsfiddle.net/yL6dr4s1/
According to jQuery documentation, closest method tries to find element matching the selector by testing the element itself and
traversing up through DOM.
It does not go through siblings of the element.
Based on your requirements, it seems like you want to traverse the tree for getting match in siblings. jQuery has siblings method to do that. So one solution would be to use siblings method like:
$("#links")["siblings"](".recipe > .ingredients")
Another soultion would be to get closest parent and then use children as answered by #mhodges
As for the query $("#links")["closest"](".recipe > .row"):
It works fine because closest method finds the match in the element itself.
Here is the example to showcase that:
$(document).ready(function() {
// Match found because it is parent
console.log($("#links")["closest"](".wrapper").length);
// No match found because element is sibling
console.log($("#links")["closest"](".row1").length);
// No match found because element is sibling
console.log($("#links")["closest"](".row3").length);
// Match found because it is element itself
console.log($("#links")["closest"](".row2").length);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="row1">
<span>Content1</span>
</div>
<div class="row2" id="links">
<span>Content2</span>
</div>
<div class="row3">
<span>Content3</span>
</div>
</div>
I am not sure of your requirements on using the exact selector/syntax you provided, but this selector works exactly how you want it to.
$(this).closest(".recipe").children(".ingredients").append('<br/><input type="text" value="Flour">');
Edit
This is the closest I could get:
$(this)["closest"](".recipe").children(".ingredients").append('<br/><input type="text" value="Flour">');
I don't think you can use the selectors in the way you propose.
As far as the DOM is concerned (and jQuery), the element defined by ingredient and the element defined by row are not related. You have to traverse up to the parent element, then back down to get to the child.
Here is a fiddle that hopefully demonstrates the issue.
If you can change it so that ingredient and row are both within the same parent div, you might have more luck with your test selector syntax.
When jQuery gets to buggy, doesn't have a certain option or just becomes to messy to use for a certain operation, it is good we also have access to good old plain javascript.
document.querySelector('#addToIngredients').addEventListener('click' , function(e) {
var recipe = getClosest(e.target,'recipe');
if (recipe) {
var ingred = recipe.querySelector('.ingredients');
ingred.innerHTML += '<br/><input type="text" value="Flour">';
}
});
function getClosest(elem,cls) {
var el = elem.parentNode;
while (el){
if (el.className.indexOf(cls) > -1) {
return el;
}
el = el.parentNode;
}
return false;
}
<div class="recipe">
<div class="ingredients">
<input type="text" value="Eggs"><br/>
<input type="text" value="Flour">
</div>
<div class="row">
<div class="col-xs-12">
Add to .ingredients
</div>
</div>
<hr/>
</div>
Of course they can be combined
$(function() {
$("#addToIngredients").on('click', function(e) {
var recipe = getClosest(e.target,'recipe');
if (recipe) {
var ingred = recipe.querySelector('.ingredients');
ingred.innerHTML += '<br/><input type="text" value="Flour">';
}
});
})
I have a parent div and it has 9 same div's am trying to swap two div's index. Following is my code:
HTML:
<div id="cont" class="container">
<div class="no">1</div>
<div class="no">2</div>
<div class="no">3</div>
<div class="blank"></div>
<div class="no">4</div>
<div class="no">5</div>
<div class="no">6</div>
<div class="no">7</div>
<div class="no">8</div>
</div>
now I want to swap say 5th and 6th indexed elements. I have no clue how to do that in JavaScript. I know there is function called .index() but how to do that in pure JS.
Here's one implementation: http://jsfiddle.net/x8hWj/2/
function swap(idx1, idx2) {
var container = document.getElementById('cont');
// ditch text nodes and the like
var children = Array.prototype.filter.call(
container.childNodes,
function(node) {
return node.nodeType === 1;
}
);
// get references to the relevant children
var el1 = children[idx1];
var el2 = children[idx2];
var el2next = children[idx2 + 1];
// put the second element before the first
container.insertBefore(el2, el1);
// now put the first element where the second used to be
if (el2next) container.insertBefore(el1, el2next);
else container.appendChild(el1);
}
This starts by getting a list of all element child nodes, then uses insertBefore to rearrange them.