Given this setup, how do I add NEW_CONTENT before the Class1 div by targeting the unique_URL_A?
<div class="Class1">
<div class="Class2">
Link
</div>
</div>
<div class="Class1">
<div class="Class2">
Link
</div>
</div>`
This is what I've tried. But, of course, this adds the content before <a> and not before Class1...
$(".Class1 a[href*='unique url A']").before("<div>NEW_CONTENT</div>");
This is because based on your selector, $(".Class1 a[href*='unique url A']"), the .before() method will of course prepend the content in front of the <a> element. The logic of your original code is therefore:
If <a> element's href attribute matches the unique URL A
And that it is a child of .Class
Then append new content in front of <a>
In order to append the new content in front of the <div> with the class .Class1, you will need to select the element itself instead, for example:
$(".Class1").has("a[href*='unique_URL_A']").before("<div>NEW_CONTENT</div>");
The revised logic will be:
If .Class1 contains the child <a> element whose href attribute matches unique URL A
Append new content in front of .Class1
See fiddle: http://jsfiddle.net/teddyrised/jmovct60/
Related
I have a div like the following
<div id="basedata-legend-land" class="legends">
<p class="update_villages_2013">Villages</p>
<p><img src="url" alt="legend" class="update_villages_2013"></p>
<p class="district_boundaries">District Boundaries</p>
<p><img src="url" alt="legend" class="district_boundaries"></p>
</div>
As you can see, i have used the same class name for p element and the img inside the other p element. I want to remove these elements when clicking on a button based on the class name. For that i did something like this
$(`.legends .update_villages_2013`).remove();
This works but when the img is removed, it leaves a empty p element. I want to remove that as well. So basically if i run this code
$(`.legends .update_villages_2013`).remove();
this is how the div should appear
<div id="basedata-legend-land" class="legends">
<p class="district_boundaries">District Boundaries</p>
<p><img src="url" alt="legend" class="district_boundaries"></p>
</div>
I couldn't just use the parentNode property because if i do, it will remove the main div as well.
You can use :has() to select elements that have a matching descendant.
$(`.legends *:has(.update_villages_2013)`).remove();
$(`.legends .update_villages_2013`).remove();
I have 3 classes with such a structure (this is slider in my web app):
<div class="emotion--digital-publishing">
<div class="dig-pub">
<div class="bg--image">/div>
<div class="dig-pub--layer center center">
<div class="layer--wrapper">
<div class="layer--content">
<div class="dig-pub--button">
</div>
</div>
</div>
</div>
</div>
</div>
I want to get href attribute of a and set a href atribute with this url to dig-pub. It is very important to me that this is the link (which class I clicked), because 3 classes have different links.
I would like to use jQuery.
You bind a click event to your anchor tag. you'll need to assign a class to the anchor tag too if you have many on the page so replace 'className' with your class name. I'm not sure how you want to assign it to the div so I've done it as a data-attribute as this is the conventional way to go.
$('a.className').on('click', function (){
$(this).closest('.dig-pub').attr('data-href', $(this).attr('href'));
});
(Don't forget to close the div on line 3 in your snippet)
jQuery('.dig-pub').on('click', function() {
url = jQuery(this).parent().find('a').attr('href');
jQuery(location).attr(url);
});
https://codepen.io/Kidkie/pen/gdaJjZ
First, add an id to the link and the div (easier to fetch the elements)
<div id="dig-pub" class="dig-pub">
<a id="id" href="/wilson-camo"></a>
Then, get the href
var href = $('#id').attr('href');
Set the value to the div
$('#dig-pub').html(href);
However, you could have find this easily on JQuery documentation.
I am using jsoup to parse an html document. I need to extract all the child div elements. This is basically div tags without nested div tags. I used the following in java to extract div tags,
Elements bodyTag = document.select("div:not(div>div)");
Here is an example:
<div id="header">
<div class="container">
<div id="header-logo">
<a href="/" title="mekay.com">
<div id="logo">
</div> </a>
</div>
<div id="header-banner">
<div data-type="ad" data-publisher="lqm.j2ee.site" data-zone="ron">
</div>
</div>
</div>
</div>
I need to extract only the following:
<div id="logo">
</div>
<div data-type="ad" data-publisher="lqm.j2ee.site" data-zone="ron">
</div>
Instead, the above code snippet is returning all the div tags. So, could you please help me figure out what is wrong with this selector
This one is perfectly working
Elements innerMostDivs = doc.select("div:not(:has(div))");
Try it online
add your html file
add css query as div:not(:has(div))
check resulted elements
If you want only div leafs that do not have any children then use this
Elements emptyDivs = document.select("div:empty");
The selector you are using now means fetch me all the divs that are not direct children of another div. It is normal that it brings the very first parent div, because the div id="header" is not a direct child of a div. Most likely its parent is body.
In html I have a lot od DIVs with names(yes, names, not IDs) respectively p001, p002, p003... which are like this:
<div id="pole" name="p001"><img src=""></div>
<div id="pole" name="p002"><img src=""></div>
<div id="pole" name="p003"><img src=""></div>
etc...
In Javascript I have defined variable called 'pos' which contains a number, for now: "284"
and a function which should change img src to "player.png".
I tried 2 ways and none of these work:
document.getElementsByName('p'+pos).innerHTML='<img src="player.png">';
and
document.getElementsByName('p'+pos).getElementsByTagName("img").src="player.png";
How to change img src which is in specified DIV?
getElementsByName returns a list of elements, not a single element, so try:
document.getElementsByName('p'+pos)[0].
getElementsByTagName("img")[0].src="player.png";
You have to select the all "img" tags in html code. And then you can change the element's src in body or specified element.
images = document.querySelectorAll("#content_image img");
First of all, I think you should switch name and id attributes on your div tags. You CANNOT have multiple elements with the same id but you can have multiple elements with the same name.
<div name="pole" id="p001"><img src=""></div>
<div name="pole" id="p002"><img src=""></div>
<div name="pole" id="p003"><img src=""></div>
To solve your problem you can use the firstChild property of DOM if the img will always be the first child of your div tag.
document.getElementById('p'+pos).firstChild.src="player.png";
I have a big div wit a lot of smaller divs within it. Say,
<div id="parent">
<div id="child1">
</div>
<div id="child1">
</div>
<div id="child2">
</div>
<div id="child1">
</div>
<div id="child1">
</div>
</div>
If I'm currently at the last 'child1', how dow I get to the top most child1 with prev()? For me it breaks when it reaches 'child2'.
First of all your HTML markup is invalid. There shouldn't be more that one element with the same ID in a document.
Read Element identifiers: the id and class attributes
id:
This attribute assigns a name to an
element. This name must be unique in a
document.
class:
This attribute assigns a class name or
set of class names to an element. Any
number of elements may be assigned the
same class name or names. Multiple
class names must be separated by white
space characters.
You can use the parent and :firstchild to get the first element inside your current parent element.
You can use something like this if you are currently at any child of element 'parent'
$(this).parent().find("div:first-child");
I think you want this:
$(this).prevAll('.child1').eq(0);
$(this).closest('.parent').find('.child1:first')
I changed to classes, because you really should only ever have one element of any given ID in a page