Develop Reference

How to access dynamically created element in Jquery

In the HTML structure, i have list of items which are styled as inline-block, and i'm wrapping the list with <marquee> </marquee> tags using JQuery since i'm not able to add id directly from the drupal8 view.
What i'm trying to do is i have 2 buttons left and right, when i click on the respective buttons the marquee should change the direction its moving.
Since its dynamically created element, i'm not able to access the element with jquery, i'm getting the error 'not defined'.
When i click on the right and left buttons i'm getting the below error
marquee.start is not a function
var $j = jQuery;
$j(".item-list > ul").wrap("<marquee class='scrollermarquee'></marquee>");
$j('.view-header').on('click', function() {
var marquee = $j('.scrollermarquee').addClass('mia');
marquee.stop();
marquee.direction = 'left';
marquee.start();
})
$j('.view-footer').on('click', function() {
var marquee = $j('.scrollermarquee').addClass('mia');
marquee.stop();
marquee.direction = 'right';
marquee.start();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="view view-ticker view-id-ticker view-display-id-block_1 js-view-dom-id-95599754f8c1606496d24cbc4e81ab801ba6c7756348defe6e876248e992d5e0">
<div class="view-header">
<p><span class="leftbutton"><</span></p>
</div>
<div class="view-content">
<div class="item-list">
<marquee class="scrollermarquee mia">
<ul>
<li>
<div class="views-field views-field-title"><span class="field-content">test-report-3</span></div>
</li>
<li>
<div class="views-field views-field-title"><span class="field-content">test-report-1</span></div>
</li>
<li>
<div class="views-field views-field-title"><span class="field-content">test-report-2</span></div>
</li>
</ul>
</marquee>
</div>
</div>
<div class="view-footer">
<p><span class="rightbutton">></span></p>
</div>
</div>

Try this:
You are selecting marquee element with jquery class selector and adding class to it which does not return the marque element and hence getting not defined value.
first get element and then add class, see below
$j('.view-header').on('click', function() {
var marquee = $j('.scrollermarquee');
marquee.addClass('mia');
marquee[0].stop();
marquee[0].direction = 'left';
marquee[0].start();
})
$j('.view-footer').on('click', function() {
var marquee = $j('.scrollermarquee');
marquee.addClass('mia');
marquee[0].stop();
marquee[0].direction = 'right';
marquee[0].start();
})

find children while moving upwards in dom

This can be sound little confusing but here it is.
What i want is to find the children(OF CLASS PARENT ) when user clicks on class target.
Important: I am not aware of children class & child inside html structure.Target class can be after 'blah' like in first case OR can be directly after children like in second case.
Information available: class "PARENt" and $(this) [class target]
Find: Children(ID) of class PARENT (you cannot use class .children)
<div class="parent">
<div class="children" id="1">
<div class="blah">
<div class="target">TARGET</div>
</div>
</div>
<div class="children" id="2">
<div class="target">TARGET</div>
</div>
<div class="children" id="3">
<div class="blah">
<div class="target">TARGET</div>
</div>
</div>
Example:
Clicking Target 1 would produce: ID = 1
Clicking Target 2 would produce: ID = 2
Clicking Target 3 would produce: ID = 3

If you want to find only ONE ID use:
$('.target').click(function() {
var found = false;
var parent;
var previous;
while(!found) {
if (previous) {
parent = previous.parent();
} else {
parent = $(this).parent();
}
if (parent.hasClass('parent')) {
found = previous;
}
previous = parent;
}
console.log(found.attr('id'));
});
Demo.

To literally answer your question:
$(".parent *") will give you ALL of the children of .parent no matter how many layers deep
To practically answer your question:
Limit possible elements, classes, IDs, etc.
$(".parent div, .parent span, .parent .child ...etc")
You can also grab only the immediate children of an element or set of elements by using the > CSS selector:
$(".parent > *") for example, will give you ALL of the immediate children of .parent
In the context of your problem
$(".target").on("click", function () {
$(this).closest(".parent").children();
// OR
$(this).closest(".parent").find("*");
});
To get the specific ID Given your current DOM structure...
$(".target").on("click", function () {
var id = $(this).closest("[id]").attr("id");
console.log(id);
});

Use .parentsUntil() to get the set of all parents up to (but not including) .parent. Then get the last element of this to get the child of the parent.
$(".target").click(function() {
var child = $(this).parentsUntil(".parent").last();
console.log(child.attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="parent">
<div class="children" id="1">
<div class="blah">
<div class="target">TARGET</div>
</div>
</div>
<div class="children" id="2">
<div class="target">TARGET</div>
</div>
<div class="children" id="3">
<div class="blah">
<div class="target">TARGET</div>
</div>
</div>
</div>
Another

Toggle multiple classes

I'm stuck with a menu I'd love to add to my website.
I have branched my work in:
Commercial
Fashion
Music
Portrait
So I have a menu like this one above.
When I click on one section, let's say "Commercial" I want all the others to be display:none.
Have a look at this FIDDLE: http://jsfiddle.net/bfevLsj2/8/
$(document).ready(function() {
$("#commercial").click(function() {
$(".commercial").toggleClass("show");
$(".fashion").toggleClass("hid");
$(".music").toggleClass("hid");
$(".portrait").toggleClass("hid");
});
});

You need siblings() width jquery
Description: Get the siblings of each element in the set of matched elements, optionally filtered by a selector.
$("[id]").click(function(){ //onclick on element with ID
var selected = $(this).attr("id"); // save the value of that ID
$("."+ selected).show().siblings("[class]").hide()//find the class with the same value as class and show it then find all siblings class and hide them
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="commercial">Commercial</div>
<div id="fashion">Fashion</div>
<div id="music">Music</div>
<div id="portrait">Portrait</div><br />
<div class="commercial">C</div>
<div class="fashion">F</div>
<div class="music">M</div>
<div class="portrait">P</div>
BUT a better approach would be to use data-*
$("[data-tab]").click(function(){
var current = $(this).attr("data-tab");
$("[data-content="+ current +"]").show().siblings("[data-content]").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div data-tab="commercial">Commercial</div>
<div data-tab="fashion">Fashion</div>
<div data-tab="music">Music</div>
<div data-tab="portrait">Portrait</div><br />
<div data-content="commercial">C</div>
<div data-content="fashion">F</div>
<div data-content="music">M</div>
<div data-content="portrait">P</div>
AGAIN it is better to use pure javascript
function runClick (event) {
var current = this.getAttribute("data-tab");
for( var content = 0; content < dataContent.length; content++) {
dataContent[content].style.display = "none"
}
document.querySelector("[data-content="+ current + "]").style.display = "block"
}
var dataTabs = document.querySelectorAll("div[data-tab]"),
dataContent = document.querySelectorAll("div[data-content]");
for(var tab = 0; tab < dataTabs.length; tab++){
dataTabs[tab].addEventListener("click", runClick , false);
}
<div data-tab="commercial">Commercial</div>
<div data-tab="fashion">Fashion</div>
<div data-tab="music">Music</div>
<div data-tab="portrait">Portrait</div><br />
<div data-content="commercial">C</div>
<div data-content="fashion">F</div>
<div data-content="music">M</div>
<div data-content="portrait">P</div>

HTML:
<div id="commercial" class="menuItem">Commercial</div>
<div id="fashion" class="menuItem">Fashion</div>
<div id="music" class="menuItem">Music</div>
<div id="portrait" class="menuItem">Portrait</div><br />
<div class="commercial content">C</div>
<div class="fashion content">F</div>
<div class="music content">M</div>
<div class="portrait content">P</div>
JavaScript:
$(document).ready(function(){
$(".menuItem").click(function(){
var id = this.id;
$('.content').removeClass('show').addClass('hid');
$('.'+id).addClass('show').removeClass('hid');
});
});
CSS:
.hid {
display:none;
}
.show {
display:block;
}
Fiddle

Have a look at this fiddle, think it's what you want
Essentially you can use .toggle() to traverse and show/hide according to whether it's the one you want to show.
$(function(){
// find all the links that you can click
$("div.clickable a").click(function(e) {
// when they're clicked, find the identifier of
// the tab/div you want shown
var clickedId = $(e.target).parent("div").attr("id");
// traverse all of the divs and show/hide according
// to whether it's the tab you want
$("div.section").each(function(index, div) {
$(div).toggle($(div).hasClass(clickedId));
});
});
});
And the HTML:
<div id="commercial" class="clickable">Commercial</div>
<div id="fashion" class="clickable">Fashion</div>
<div id="music" class="clickable">Music</div>
<div id="portrait" class="clickable">Portrait</div>
<br />
<div class="commercial section">C</div>
<div class="fashion section">F</div>
<div class="music section">M</div>
<div class="portrait section">P</div>
HTH
Edited to add an "ALL" link in this fiddle
$("div.clickable a").click(function(e) {
// when they're clicked, find the identifier of
// the tab/div you want shown
var clickedId = $(e.target).parent("div").attr("id");
// traverse all of the divs and show/hide according
// to whether it's the tab you want
$("div.section").each(function(index, div) {
$(div).toggle($(div).hasClass(clickedId) || clickedId=="ALL");
});
});
After adding this to the list of clickable divs:
<div id="ALL" class="clickable">
ALL
</div>

Your could that more easy like:
<div class="link" id="commercial">Commercial</div>
<div class="link" id="fashion">Fashion</div>
<div class="link" id="music">Music</div>
<div class="link" id="portrait">Portrait</div><br />
<div class="commercial elem">C</div>
<div class="fashion elem">F</div>
<div class="music elem">M</div>
<div class="portrait elem">P</div>
<script type="text/javascript">
$(document).ready(function(){
$(".link").click(function(){
var id = $(this).attr('id');
$('.elem').hide();
$('.' + id).show();
});
});
</script>

JQuery: How to get all bottom-most children in a DOM tree?

Based on the DOM tree below, I want to get all of the <p> element that are the child of every div with message as its class and put them all in an array. This will create an array of objects.
Note : ul and all of its children in all levels can be added dynamically to the dom at any given time.
How do I do that?
I have tried
var messages = $('.rightP').find('li>.message>p');
$.each(messages,function(){
console.log(this);
});
but no luck
DOM tree
<ul class="rightP">
<li>
<div class="sender">
<p>David</p>
</div>
<div class="message">
<p>Hello</p>
</div>
</li>
<li>
<div class="sender">
<p>Watson</p>
</div>
<div class="message">
<p>yes anything?</p>
</div>
<div class="message">
....
</li>
...
</ul>

You used wrong jQuery selector. Replace $('.rightP').('li>.message>p') with $('.message > p') or you could do it this way.
var messages = jQuery('.message > p');
jQuery.each(messages, function (index, elem) {
var message = jQuery(elem);
console.log(message.text())
});
Here's the working fiddle.

$('.rightP').('li>.message>p');
Wrong statement. You should try
$('.rightP').find('li>.message>p');
etc...

You can get all those like bellow
var messages = $('.rightP').find('li>.message>p');
$.each(messages,function(){
console.log(this);
});

Toggle single Div layer using jQuery

At runtime I have a loop that creates a number of divs with the same class depending on the number in the database.
<div class="show">....</div>
<div class="show">....</div>
<div class="show">....</div>
I want to display this div using the slideToggle() function with jQuery. For each of these I have a separate hyperlink which when clicked should display the div. Also there are a number of tags in between the hyperlink and the div that I want to toggle.
<div>
<div>
View
</div>
<br />
</div>
<div>
<div class="clear"></div>
</div>
<div class="show">....</div>
<div>
<div>
View
</div>
<br />
</div>
<div>
<div class="clear"></div>
</div>
<div class="show">....</div>
<div>
<div>
View
</div>
<br />
</div>
<div>
<div class="clear"></div>
</div>
<div class="show">....</div>
$(function () {
$(".display").click(function(){
$(".show").slideToggle();
return false;
});
});
Naturally when this is called each div layer is toggled, regardless of which hyperlink is clicked. I want to just toggle the div closest to the given hyperlink.
Thanks in advance.

Find the <div> relatively by going from this using tree traversal functions, like this:
$(function () {
$(".display").click(function () {
$(this).next().slideToggle();
return false;
});
});
In this case since it's the next sibling element we care about, use .next(), if the structure is different from the question, you'll need to adjust it accordingly, go get from the <a> you clicked on (this) to the <div> you want to toggle.

$(function () {
$(".display").click(function () {
$(this).next.(".show").slideToggle();
return false;
});

Or while you loop through creating your divs, can you add (for example) a rel value that's incremented by one every time? Giving you something like...
View
<div class="show" rel="1">....</div>
View
<div class="show" rel="2">....</div>
View
<div class="show" rel="3">....</div>
This would then link the two divs so that you could get the rel value of your clicked element and use that to identify the shown / hidden div.
<script type="text/javascript">
$(function () {
$(".display").click(function () {
var element_id = $(this).attr('rel');
$(".show").attr('rel', element_id).slideToggle();
return false;
});
});