I'm trying to have js change the title attributes for each div based on each divs text content in html.
I want to add the title of each div from its own text, so for example: "Text Example 1"s title would be "Text Example 1", "Text Example 2"s title would be "Text Example 2" and so on.
Currently I've made a js code that does that but only for one of the divs. I'm a complete beginner in js so any advice is appreciated.
<div class="example">
<div class="text1" id="id-text1">Text Example 1</div>
</div>
<div class="example">
<div class="text1" id="id-text1">Text Example 2</div>
</div>
<div class="example">
<div class="text1" id="id-text1">Text Example 3</div>
</div>
const titleContent = document.getElementById("id-text1");
function ChangeTitle(){
document.querySelectorAll('.text1').forEach(function ChangeTitleSecond(){
titleContent.setAttribute('title', titleContent.textContent);
})
};
window.onload = ChangeTitle();
Steps to set title of <div> to it's (text) content:
Get all of the <div>s (selector is div.text1)
For each of them, set title to innerText value
Solution:
<div class="example">
<div class="text1">Text Example 1</div>
</div>
<div class="example">
<div class="text1">Text Example 2</div>
</div>
<div class="example">
<div class="text1">Text Example 3</div>
</div>
<script>
divs = Array.from(document.querySelectorAll("div.text1"))
for (elem of divs) {
elem.setAttribute("title", elem.innerText)
}
</script>
Demo
getElementById() returns only a single element. id attributes should be unique within the document. But that's ok, you don't need it. You're already getting a list of the elements to go through with querySelectorAll()
forEach() will pass each element as the first parameter of your function.
function ChangeTitle(){
document.querySelectorAll('.text1').forEach(function
ChangeTitleSecond(item){
item.setAttribute('title', item.textContent);
})
};
window.onload = ChangeTitle();
You can use this implementation. If you need a list of some items which has the same attributes (such as id, class or tag) you can pick them all through their specific attribute of them by querySelectorAll.
const titleContentList = document.querySelectorAll('[id=id-text1]')
function ChangeTitle(){
titleContentList.forEach((item)=>{
const title = item.textContent
if(!title) return;
item.setAttribute('title',title)
})
}
window.onload = ChangeTitle();
Related
I'm a wondering how I can get innerHTML of div when it contains a div element and a text. My code looks like this:
var outer = document.getElementById("outer").childNodes;
outer.forEach(function(e) {
console.log(e.innerHTML);
});
<div id="outer">
<div class="item">
<div class="icon"></div>
Hello
</div>
</div>
As you can see, innerHTML is getting the child div and the text, but I only want the text. Is it possible to make it without splitting or something?
I would put Hello in a separate container if you can.
var outer = document.getElementById("outer");
var firstItem = outer.children[0];
var text = firstItem.querySelector('.text').innerHTML;
console.log(text);
<div id="outer">
<div class="item">
<div class="icon"></div>
<span class="text">Hello</span>
</div>
</div>
That way you have more control over it if you want to add more content
i have 2 divisoin
<div id="details">
<div id="feature">
</div>
</div>
I need to put the content using $("#details").html(content); (it is working correctly) like that way i need to put the content inside feature div i am using following way:
$("#details #feature").html(content);
but it is not working..how to solve?
When you use $("#details").html(content); you override the content of the div. So you're inner div with the id feature gets removed. Maybe you use $("#details").prepend(content); or you add another div for the main content and replace that content.
Look here is an example:
https://jsfiddle.net/morrisjdev/s9u7rfcu/
ID is a unique attribute so you can directly use id like below.
$(function() {
var content = "Some text here";
$('#feature').html(content);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="details">
<div id="feature">
</div>
</div>
OR
$(function() {
var content = "Some text here";
$('#details').find('#feature').html(content);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="details">
<div id="feature">
</div>
</div>
$(document).ready(function(){
var htmldetail ="Hello! I am Here";
var details = $("#details").html(htmldetail);
$("#userfeature").html(details);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="details">
<div id="userfeature">
</div>
</div>
The second is #feature and not #userfeature. And also add the jQuery Library as well. You can replace test with content variable.
$("#feature").html("test");
<div id="details">
<div id="feature">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
And also remember Id is unique and hence no need to mention its parent.
Run the following snippet and you can get the output.
Simple way..Go Through this
HTML
<div id="details">
<div id="feature">
</div>
</div>
JQUERY
$(document).ready(function()
{
var content="contain sample data";
// $("#details").html(content); if you wrote like this,
this will replace all content, so the inner div will be replaced
$("#details").append(content); // outer div
$("#feature").html(content);
});
Or you can use css-like selector method:
$(document).ready(function() {
$('#details > #feature').html('Hello <strong>World!!!</strong>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="details">
<div id="feature">
</div>
</div>
I have created a plunk for it and it is working.
Try including the action inside
$( document ).ready(function() {
console.log( "ready!" );
var content = 'Hey there';
$("#details #feature").html(content);
});
Plunk :- http://plnkr.co/edit/63GsIoGmprnKs7oe77cF?p=preview
this is sample code explain what i want:
<div id="someId">
<div class="someClass"></div>
<div class="targetClass"></div>
</div>
<div id="someId">
<div class="someClass"></div>
<div class="targetClass"></div>
</div>
<div id="someId">
<div class="someClass"></div>
</div>
this code for jquery:
var $newDiv = $("<div/>")
.addClass("targetClass")
$(".someClass").append($newDiv);
result is add a TargetClass in div number 3 and repeat same class in first and second div.
question is how i add class in the last div and not repeat it in another div.
Judging by your code, you want new div as a sibling of your .someClass div rather than its child.
Simply replace this line
$(".someClass").append($newDiv);
by
$( "div[id]:not(:has(.targetClass))" ).append($newDiv); //will append new div to all those divs which doesn't have child element with targetclass
var $newDiv = $("<div/>").addClass("targetClass");
$( "div[id]:not(:has(.targetClass))" ).append($newDiv);
Demo
Using .last() will select the last element you are searching for.
jQuery(".someClass").last().append($newDiv);
If you mean to add div with targetClass to a div with someId if it donot exists, you can use the find() function:
if($('#someId').find('.someClass').length == 0) {
var $newDiv = $("<div/>")
.addClass("targetClass")
$("#someId").append($newDiv);
}
I suppose you have unique IDs for parent divs as someId is not valid if it is the actual ID applied on multiple elements, this makes the markup invalid.
Use .last().parent() to put the element as a sibling element as they share same parent:
var $newDiv = $("<div/>")
.addClass("targetClass").html('dynamic target element.')
$(".someClass").last().parent().append($newDiv);
div{border:solid 1px red; margin:10px 0 0 0;}
div div{border:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="someId-1">
<div class="someClass">some</div>
<div class="targetClass">target</div>
</div>
<div id="someId-2">
<div class="someClass">some</div>
<div class="targetClass">target</div>
</div>
<div id="someId-3">
<div class="someClass">here after this elem should add</div>
</div>
I have 20 rows of DIVs. The initial state hides all spoilers and is like below (I show the first 3 rows here):
<div class="main" onClick="showHide()">
some text 1
<div class="spoiler hide">spoiler</div>
</div>
<div class="main" onClick="showHide()">
some text 2
<div class="spoiler hide">spoiler 2</div>
</div>
<div class="main" onClick="showHide()">
some text 3
<div class="spoiler hide">spoiler 3</div>
</div>
etc..
CSS:
<style>
.main{background:silver;padding:1em;margin-bottom:1em}
.hide{display:none}
.show{display:block}
</style>
My goal is to manipulate/change the spoiler classes after user clicks on the "main" DIV. That is, after clicking on one of the "main" DIVs the "spoiler hide" class should automatically change to "spoiler show" so that the text is shown. And when user clicks on another "main" DIV, all 'spoiler show' classes should change to 'spoiler hide' and only the currently clicked "main" DIV should apply the 'spoiler show' class.
So it's basically like a toggle where only one (the last clicked) DIV shows the spoiler. I hope to find the simplest/fastest solution (JS in one line would work too).
I tried to use some JS function like below, but cannot make it work. I also read that 'document.querySelectorAll' might be used somehow.. I cannot use jQuery here.
<script>
function showHide() {
var e = document.getElementsByClassName('spoiler hide');
for(i=0; i<e.length; i++) {
e[i].className ='spoiler show';
}
}
</script>
Try this:
<script>
function showHide(sender) {
var e = sender.getElementsByClassName('spoiler hide');
for(i=0; i<e.length; i++)
{
e[i].className ='spoiler show';
}
}
</script>
<div class="main" onclick="showHide(this)">
some text 1
<div class="spoiler hide">spoiler</div>
</div>
<div class="main" onClick="showHide(this)">
some text 2
<div class="spoiler hide">spoiler 2</div>
</div>
<div class="main" onClick="showHide(this)">
some text 3
<div class="spoiler hide">spoiler 3</div>
</div>
Working fiddle here: http://jsfiddle.net/t0shq84f/
Is there a way to get a next element from a current sister element? Sorry if confusing.
<div class="wrapper">
<div class="paDiv">
<div class="saDivOne">
</div>
</div>
<div class="paDivTwo">
<div class="saDivTwo">
</div>
</div>
</div>
<script>
$('.paDiv').each(function(){
htmlContent = $(this).children().html();
SisterDivContent = $(this).next('.paDivTwo').children().html();
console.log(SisterDivContent);
})
</script>
$('.paDiv').each(function(){
var SisterDivContent = $(this).parent().find('.saDivTwo').html();
alert(SisterDivContent);
});
You have to add some contents inside div class 'saDivTwo'. Otherwise you will get empty content only.
Demo:
http://jsfiddle.net/U8n7g/
Try using .sibling:
$('.paDiv').sibling('paDivTwo').html()