i'm using MutationObserver to observe the DOM for insertions or changes of the DOM. But what I want to achieve additionally, is to reproduce the DOM changes in some kind of backend.
Lets say I have the following DOM:
<div class="container">
<div class="row marketing">
<div class="col-lg-6">
<li>
<h4>Text</h4>
<p>More Text</p>
<button class="add-stuff">Add Element</button>
</li>
<li>
<h4>Text</h4>
<p>More Text</p>
<button class="add-stuff">Add Element</button>
</li>
<li>
<h4>Text</h4>
<p>More Text</p>
<button class="add-stuff">Add Element</button>
</li>
</div>
</div>
</div>
On click on a button, the corresponding parent li gets a new child element (h1, div, span, whatever). Now the MutationObserver gets fired, and I can get information on the added element (and maybe the children).
For some kind of replay though, I want to get the excact position of the parentNode of the inserted element.
Lets say I press the button of the second element, the DOM changes to
<div class="container">
<div class="row marketing">
<div class="col-lg-6">
<li>
<h4>Text</h4>
<p>More Text</p>
<button class="add-stuff">Add Element</button>
</li>
<li>
<h4>Text</h4>
<p>More Text</p>
<button class="add-stuff">Add Element</button>
<span>Example text</span> <!-- Node has been added -->
</li>
<li>
<h4>Text</h4>
<p>More Text</p>
<button class="add-stuff">Add Element</button>
</li>
</div>
</div>
</div>
Now, what I need, is the excact position of this node. For example
div.container > div.row.marketing > li[2]
What I can't rely on are ID or something like this. I want to use this script on sites, where I don't have control over the DOM, or where is a lot of dynamic data, which makes it very inconvenient to add a unique ID to every element.
I have looked into XPath, which obviously isn't supported natively in javascript.
Does anyone has an idea how to achieve this?
Related
How to create dynamically DOM elements (tree) from selector in JS?
Selector will be different in any other cases.
For example:
.first>.second>.third>ul>li
So in this case, I should get:
<div class="first">
<div class="second">
<div class="third">
<ul>
<li></li>
</ul>
</div>
</div>
</div>
After that I will be able to do 'appendChild' to body or some elements.
So I am trying to get the firebase link that the user has provided and make it a clickable link. I have this so far
<li>
<div class="collapsible-header grey lighten-4">${forum.title}</div>
<div class="collapsible-body white">
${forum.content} <br />
<p>${forum.link}</p>
</div>
</li>
I want to make forum.link clickable but don't know how to add a href before a variable.
Thanks
Can you try this:
<div class="collapsible-body white">
${forum.content} <br/>
<p>
Link Description
</p>
</div>
this.faqLogic = function()
{
$('a .toggle').click(function(){
$('this .answer').show();
});
};
HTML:
<li class="clearfix question">
<a class="toggle" href="#">>
<h3>
QUESTION
</h3>
</a>
<div id="answer_1" class="answer">
<h6>
<span>ANSWER</span>
</h6>
</div>
</li>
There are multiple questions/answers of course. I just cant understand as to why it won't work at all. I'm getting no errors and required dependencies (jquery) are installed and called in first.
Any ideas?
Because you're trying to select elements of class .answer that are children of a <this> element. Clearly you have no <this> element.
Also, because you have a space between a .toggle, you're selecting elements of class .toggle that are children of an a element. You want a element that have class .toggle. No space for that selector, so it would be a.toggle.
All in all, perhaps you meant:
$('a.toggle').click(function(){
$('.answer').show();
});
I suggest that you take a read of how CSS selectors work in general. Your understanding could do with a bit of firming-up.
$('.toggle').click(function(){
$(this).next().toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<li class="clearfix question">
<a class="toggle" href="#">
<h3>
QUESTION
</h3>
</a>
<div id="answer_1" class="answer">
<h6>
<span>ANSWER</span>
</h6>
</div>
</li>
I´ve got code:
<div class="gridContainer clearfix">
<div id="content">
<ul class="accordion" id="accordion">
<li class="bg4 bleft">
<div class="heading">Hello!</div>
<div class="bgDescription"></div>
<div class="description">
<h2>Title</h2>
<p>text</p>
</div>
</li>
</ul>
</div>
</div>
and I need to change text on Hello! on Title and on text. How I could select tags with multiple classes and id's? the codes:
document.getElementsByClassName('bg4 bleft heading').innerHTML="bla";
document.getElementsByClassName('description').innerHTML="bla";
doesn´t work
Thanks!
Use :
document.getElementsByClassName('accordion bg4 heading').innerHTML="bla";
You need not add same classes of a particular html element as you did, but rather use a hierarchal way like above so that you can pin-point the element you need to focus.
How do I get the jQuery UI Accordion to work when I need to put a wrapper around each element?
Example HTML:
<ul>
<li>
<h3>header</h3>
<div>
Content goes here
</div>
</li>
<li>
<h3>header</h3>
<div>
Content goes here
</div>
</li>
</ul>
I just can't seem to get it to work.
You cannot make the accordion work with your current markup. Elements must be siblings like this:
<div id="parentAccordionDiv">
<h3>header</h3>
<div>
Content goes here
</div>
<h3>header</h3>
<div>
Content goes here
</div>
</div>
I stand corrected. I got an accordion to work fine like this:
<script type="text/javascript">
$(function(){
$('#accordion').accordion();
})
</script>
<ul id="accordion">
<li>
<h3>header</h3>
<div>
Content goes here
</div>
</li>
<li>
<h3>header</h3>
<div>
Content goes here
</div>
</li>
</ul>