I've dynamic structure where data is coming in below way. I want to filter all element with class name "My_data" and take first of it. in below code structure i want to get first "My_data" class element.
<div class="all_data">
<div class="listing">
<div class="other_1">Block One</div>
<div class="mbox">Block Two</div>
<div class="other_2">Block Three</div>
<div class="mbox">Block Four</div>
</div>
<div class="listing">
<div class="other_1">Block One</div>
<div class="mbox">Block Two</div>
<div class="other_2">Block Three</div>
<div class="mbox">Block Four</div>
</div>
<div class="listing">
<div class="other_2">Block One</div>
<div class="My_data">My data 1</div>
<div class="other_2">Block Three</div>
<div class="My_data">My data 2</div>
</div>
<div class="listing">
<div class="other_5">Block One</div>
<div class="My_data">My data 3</div>
<div class="other_2">Block Three</div>
<div class="My_data">My data 4</div>
</div>
</div>
so from above code structure I want to select My data 1
Please note: this data structure is dynamic so it might be change every time. sometimes first listing div get "My_data" class and some time no listing div has it.
Try this:
var myDataDiv = document.querySelector('.My_data')
var myData = myDataDiff && myDataDiff.innerText; // > string | null
document.querySelector('.My_data') will either return the first element with class My_data - if it exists - or null otherwise. Therefore myData will either be null or the result of myDataDiff.innerText.
Just make one empty div and append all child divs of listing class in it. After that take the first from that new list.
Related
Well, I have n elements with the class "class_one"
and certain other elements with the class "class_two".
These elements are nested and in some cases there are other elements in that nest, what I need is to select the next element with a specific class.
let class_one = document.querySelectorAll('.class_one');
class_one.forEach(element => {
element.addEventListener('click',()=>{
console.log("From this element, the next one containing the class class_two");
})
});
<div class="class_one">
click 1
</div>
<div class="class_two">elemento 1</div>
<div class="class_one">
click 2
</div>
<div class="class_four"></div>
<div class="class_two">elemento 2</div>
<div class="class_one">
click 3
</div>
<div class="class_six"></div>
<div class="class_two">elemento 3</div>
<div class="class_one">
click 4
</div>
<div class="class_five">click 5</div>
<div class="class_two">elemento 4</div>
<div class="class_one">
click 6
</div>
<div class="class_two"></div>
Personally, I would like an answer without using Jquery, but all are welcome.
I'm trying to get the text content of a specific class across the page, then print them out in a different div, separated by a comma.
Example:
<!-- Within the HTML Page -->
<div class="copyright">Image one</div>
<div class="copyright">Image two</div>
<div class="copyright">Image three</div>
<!-- Should output: "Image one, Image two, Image three" -->
<div class="showCopyright"></div>
How would I achieve this using only pure VanillaJS, not jQuery?
Would I use the innerHTML? or innerText?
I really appreciate any help you can provide.
I would use textContent unless there is or you want markup in the result
window.addEventListener("DOMContentLoaded", () => {
document.querySelector(".showCopyright")
.textContent = [...document.querySelectorAll(".copyright")]
.map(({ textContent }) => textContent.trim()).join(", ");
});
<!-- Within the HTML Page -->
<div class="copyright">Image one</div>
<div class="copyright">Image two</div>
<div class="copyright">Image three</div>
<!-- Should output: "Image one, Image two, Image three" -->
<div class="showCopyright"></div>
Here is a pure javascript method to do that:
var textArray = [];
var elements = document.getElementsByClassName("copyright");
for (var i = 0; i < elements.length; i++) {
textArray.push(elements[i].innerText);
}
document.getElementsByClassName("showCopyright")[0].innerText = textArray.join(', ');
<div class="copyright">Image one</div>
<div class="copyright">Image two</div>
<div class="copyright">Image three</div>
<div class="showCopyright"></div>
My problem is here: http://jsfiddle.net/9vhobdw7/2/
<div class="c-container">
<div>Container 4
<div>my div 4</div>
<div class="item">4</div>
</div>
<br>
<div>Container 3
<div>my div 3</div>
<div class="item">3</div>
</div>
<br>
<div>Container 2
<div>my div 2</div>
<div class="item">2</div>
</div>
<br>
<div>Container 1
<div>my div 1</div>
<div class="item">1</div>
</div>
</div>
I'd like to have only the divs with class="item" in reverse order, from bottom to top. Other divs need to be the same. Like this:
<div class="c-container">
<div>Container 4
<div>my div 4</div>
<div class="item">1</div>
</div>
<br>
<div>Container 3
<div>my div 3</div>
<div class="item">2</div>
</div>
<br>
<div>Container 2
<div>my div 2</div>
<div class="item">3</div>
</div>
<br>
<div>Container 1
<div>my div 1</div>
<div class="item">4</div>
</div>
</div>
Actually in the divs class="item" I have a call from divs from external URL with function load:eq(n).
I've tried with CSS, .each().reverse(), Array, replaceWith() and more functions but nothing, have no significant result.
Edit, add task.
Now, if the task includes more classes, with divs inside to reverse as
<div class="c-container">
<div>Container 6
<div>my div 6</div>
<div class="item2">3</div>
</div>
<br>
<div>Container 5
<div>my div 5</div>
<div class="item1">1</div>
</div>
<br>
<div>Container 4
<div>my div 4</div>
<div class="item2">2</div>
</div>
<br>
<div>Container 3
<div>my div 3</div>
<div class="item2">1</div>
</div>
<br>
<div>Container 2
<div>my div 2</div>
<div class="item1">2</div>
</div>
<br>
<div>Container 1
<div>my div 1</div>
<div class="item1">3</div>
</div>
</div>
I have to duplicate the function changing the variables names and classes names? I've tried this
const children1 = document.querySelectorAll('.c-container .item1');
const reverse1 = [...children1].reverse();
children1.forEach((item, i) => item.outerHTML = reverse1[i].outerHTML);
const children2 = document.querySelectorAll('.c-container .item2');
const reverse2 = [...children2].reverse();
children2.forEach((item, i) => item.outerHTML = reverse2[i].outerHTML);
which works, but it seems redundant.
Here's a solution, not really swapping divs, just swapping content:
var items=document.getElementsByClassName("item");
var length=items.length;
for(var i=0; i<Math.floor(length/2); i++) {
var temp=items[i].innerHTML;
items[i].innerHTML=items[length-i-1].innerHTML;
items[length-i-1].innerHTML=temp;
}
items and length are helper vars.
innerHTML can be replaced with innerText.
etc...
Edit: fixed with Math.floor(length/2). (There's an extra swap when length is odd...)
You can replace innerHtml for div with class item:
$(document).ready(function() {
var listItems = Array.from(document.getElementsByClassName('item')).map(i=>i.cloneNode(true))
Array.from(document.getElementsByClassName('item')).forEach((item,index)=>{
item.innerHTML = listItems[listItems.length-index-1].innerHTML
})
});
See full example in the playground: http://jsfiddle.net/denisstukalov/7uhmzbct/23/
You shouldnt be trying to reverse the divs... You are trying to reverse what those divs display. So, you can build an array of the contents of the "item" divs themselves. Then reverse the order of that array and then replace the innerHTML of your "item" divs.
Example below... it is not the most effecient code because it iterates over your list twice... but for the purposes of showing what you need to do to accomplish what it sounds like you're wanting, I think its more illustrative.
function reverseItemContents() {
var itemDivs = document.getElementsByClassName("item");
var contentList = [];
var index;
for (index = 0; index < itemDivs.length; index++) {
contentList.push(itemDivs[index].innerHTML);
}
contentList.reverse();
for (index = 0; index < itemDivs.length; index++) {
itemDivs[index].innerHTML = contentList[index];
}
}
<button onClick="reverseItemContents()">Reverse Content</button>
<div class="c-container">
<br>
<div>Container 4
<div>my div 4</div>
<div class="item"><img src="https://upload.wikimedia.org/wikipedia/commons/1/16/Eo_circle_blue-grey_white_number-4.svg" width="130"></div>
</div>
<br>
<div>Container 3
<div>my div 3</div>
<div class="item"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/NYCS-bull-trans-3.svg/1024px-NYCS-bull-trans-3.svg.png" width="130"></div>
</div>
<br>
<div>Container 2
<div>my div 2</div>
<div class="item">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d8/Icon_2_red.svg" width="130"></div>
</div>
<br>
<div>Container 1
<div>my div 1</div>
<div class="item"><img src="https://upload.wikimedia.org/wikipedia/commons/f/f4/Icon_1_%28set_orange%29.png" width="130"></div>
</div>
</div>
My method would be to simply select them all, reverse the array, and then overwrite the original items. Using outerHTML means that more than just the divs' contents will be swapped.
function reverse(selector) {
const children = document.querySelectorAll(selector);
const reversed = [...children].reverse();
children.forEach((item, i) => item.outerHTML = reversed[i].outerHTML);
}
<div class="c-container">
<div>Container 4
<div>my div 4</div>
<div class="item" style="background-color: tomato;">4</div>
</div>
<br>
<div>Container 3
<div>my div 3</div>
<div class="item" style="background-color: orange;">3</div>
</div>
<br>
<div>Container 2
<div>my div 2</div>
<div class="item" style="background-color: yellow;">2</div>
</div>
<br>
<div>Container 1
<div>my div 1</div>
<div class="item" style="background-color: lightgreen;">1</div>
</div>
</div>
<button onclick="reverse('.c-container .item')">Reverse</button>
I don't really see a need to add all the extra complexity proposed by the other answers. Using an arugment will allow you to re-use the function for other sets of nodes.
I have the next code:
<div class="components_container">
<div class="first_group">Element 1</div>
<div class="first_group">Element 2</div>
<div class="first_group">Element 3</div>
<div class="second_group">Element 4</div>
<div class="second_group">Element 5</div>
<div class="second_group">Element 6</div>
</div>
And I would like to wrap both groups in different div tags, like this:
<div class="components_container">
<div class="group1">
<div class="first_group">Element 1</div>
<div class="first_group">Element 2</div>
<div class="first_group">Element 3</div>
</div>
<div class="group2">
<div class="second_group">Element 4</div>
<div class="second_group">Element 5</div>
<div class="second_group">Element 6</div>
</div>
</div>
To do what you are trying to accomplish, you can do this in pure javascript:
Get a reference to the container (this code implies that you have only one element with that class):
var container = document.querySelector(".components_container");
Create the two external divs, add the classes and append them to the container:
var first_cont = document.createElement("div");
var second_cont = document.createElement("div");
first_cont.classList.add("group1");
second_cont.classList.add("group2");
container.appendChild(first_cont);
container.appendChild(second_cont);
Get the divs with a specific class and change their parent (remove child / append child):
var first_elements = container.querySelectorAll(".first_group");
var second_elements = container.querySelectorAll(".second_group");
for (el of first_elements) {
container.removeChild(el);
first_cont.appendChild(el);
}
for (el of second_elements) {
container.removeChild(el);
second_cont.appendChild(el);
}
This will do what you want, but please, next time try to add some more information, like some context, the steps that you tried or where are you finding difficulties :)
To start, here's a JSFiddle:
https://jsfiddle.net/RobGADV/kuy8wsLg/
<div class="tocButtonsDiv">
<div class="tocListItems">
<div class="tocItemDiv">
<div class="tocItem editTocTitle" data-pageid="51" data-title="Bacon Ipsum">Bacon Ipsum</div>
</div>
<div class="tocItemDiv">
<div class="tocItem editTocTitle" data-pageid="43" data-title="Pirate Ipsum">Pirate Ipsum</div>
</div>
<div class="tocItemDiv">
<div class="tocItem editTocTitle" data-pageid="48" data-title="Klingon Ipsum">Klingon Ipsum</div>
</div>
<div class="tocSubListItems">
<div class="tocSubItemDiv">
<div class="tocSubItem editTocSubTitle" data-proposaltocid="8" data-title="klingon anchor">klingon anchor</div>
</div>
<div class="tocSubItemDiv">
<div class="tocSubItem editTocSubTitle" data-proposaltocid="10" data-title="klingon anchor too">klingon anchor too</div>
</div>
</div>
<div class="tocItemDiv">
<div class="tocItem editTocTitle" data-pageid="52" data-title="Plastic Onion Rings">Plastic Onion Rings</div>
</div>
<div class="tocSubListItems">
<div class="tocSubItemDiv">
<div class="tocSubItem editTocSubTitle" data-proposaltocid="11" data-title="Condiments">Condiments</div>
</div>
</div>
<div class="tocItemDiv">
<div class="tocItem editTocTitle" data-pageid="53" data-title="Porcupines For Fun">Porcupines For Fun</div>
</div>
<div class="tocItemDiv">
<div class="tocItem editTocTitle" data-pageid="54" data-title="Tragedy At 7-11">Tragedy At 7-11</div>
</div>
<div class="tocSubListItems">
<div class="tocSubItemDiv">
<div class="tocSubItem editTocSubTitle" data-proposaltocid="9" data-title="tragedy anchor">tragedy anchor</div>
</div>
</div>
<div class="tocItemDiv">
<div class="tocItem editTocTitle" data-pageid="57" data-title="Something Fancy">Something Fancy</div>
</div>
</div>
</div>
Basically, I have a list of Items and Subitems, as you can see if you run the fiddle. The larger boxes are the Items, the smaller boxes are subitems, grouped below its parent Item. Make sense so far?
I want to be able to do the jqueryUI sortable() routine on each of the sets; meaning, I want to be able to reorder the Items (large buttons), and then also reorder the subItem (small buttons) under its parent Item.
I have the entire thing under a div called tocButtonsDiv. Inside that is a div called tocListItems, which contains ALL of the Items ("tocItem") (and their respective subItems).
The way it is in the Fiddle right now is the only way it works at all, but it's not keeping the subItems with the parent, and in fact, treats the subitems as a single group (whether there's one, two or more). I know my markup may need a little work, but I wonder if the .sortable() method has some more options I'm not aware of that will let me associate the subItems to the Items.
FWIW, the Fiddle as presented doesn't work at all; not sure why. This is my first time actually using JSFiddle.
Thank you for your help!