I am new to jQuery and writing a script to change the color of a certain element based on whether or not the element it lies upon has been selected. My first problem is I am not able to edit the html structure and the way the structure is formed is causing some problems for me. Basically this is the structure:
<div class="item">
<div class="teamNames">
<span>Team 01</span>
<span>Team 02</span>
</div>
<div class="teamBlocks">
<div class="block 01">
<div>Home</div>
<div>0.65</div>
</div>
<div class="block 02">
<div>Home</div>
<div>0.65</div>
</div>
</div>
</div>
The team names have been absolutely positioned to lie over the blocks, so the content of the blocks looks like "Team Name Home 0.65".
When a block is selected its class becomes:
class="block 01 sel"
I am able to change the color of the "Home" and "0.65" text easily with CSS but changing the team name (Team 01/Team 02) is proving to be a lot more complicated and I am wondering if its possible to do this with or javascript or jQuery ?
Its also worth noting that the team names will never be the same so doing a selection based on the content is not possible
To change a specific team, you will need to give them unique identifiers, for example:
<div class="teamNames">
<span id="item1">Team 01</span>
<span id="item2">Team 02</span>
</div>
No you change select the specific span elements using jQuery. For example you want to change Team 01:
$("#item1").text("New Team Name");
Hopefully this is what you are trying to do.
if I get the question right, you can change the names with jquery like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(".teamNames span:first").html("hello world");
});
</script>
Do you need to find team element by selected block?
If yes you can use $.index function for getting index of selected team:
var currentBlock = $('.sel');
var indexOfCurrentBlock = $('.block').index(currentBlock);
if (indexOfCurrentBlock != -1) {
var currentTeamName = $('.teamNames span').eq(indexOfCurrentBlock);
currentTeamName.text('aaaa');
}
http://jsfiddle.net/JRFv6/
Is this looking for class="block 01 sel" if it is selected
$(".block").click(function(){
$(".block").removeClass("sel");
$(this).addClass("sel");
});
DEMO
the way to change in elements not having id without to change html
<!DOCTYPE HTML>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
<div class="item">
<div class="teamNames">
<span>Team 01</span>
<span>Team 02</span>
</div>
<div class="teamBlocks">
<div class="block 01">
<div>Home</div>
<div>0.65</div>
</div>
<div class="block 02">
<div>Home</div>
<div>0.65</div>
</div>
</div>
</div>
<script>
$(".teamNames span:eq(0)").html("New-Team-Name<br>");
$(".teamNames span:eq(1)").text("---- New Team Name");
</script>
</body>
</html>
Related
I am using Uikit 2 (https://getuikit.com/v2) - and I need to solve a problem.
I got this markup: https://codepen.io/anon/pen/jZwNeB
Now I need to do the following. This part:
<div class="toc uk-panel uk-panel-box-primary sticky-toc" style="margin: 0px;"> ...</div>
Should be shown on the left side - right under the time datetime part. But - and this is important: I can not change the source itself. I can only add a class to toc uk-panel uk-panel-box-primary sticky-toc and add custom CSS and custom JS.
Any idea how to solve this?
var obj = document.getElementById("node");
var parent = document.getElementById("parent");
parent.appendChild(obj);
Here, node is the "toc uk-panel uk-panel-box-primary sticky-toc" element.
parent is the "uk-width-large-1-4" element
You can obviously use any other DOM method than the one I have used.
So, if you want to select the DOM of the entity using its class name class, you have to use getElementsByClassName("big long class name")[0] to correctly reference that entity
I just wanted to highlight the appendChild method
I believe the best answer is using CSS, but because I don't know about getukit and I don't know how to solve this using CSS only.
Here you can try with jQuery. Tell me if you want do this using pure JS.
<link href='https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.5/css/uikit.min.css' rel='stylesheet'>
<div class="uk-grid">
<div class="uk-width-large-1-4">
<p class="uk-article-meta tm-article-date uk-margin-small selectionShareable">
<time datetime="2018-02-12T12:00:58+00:00">12.02.18</time>
</p>
</div>
<div class="uk-width-large-3-4">
<h1 class="uk-article-title">Test Content</h1>
<div class="uk-margin">
<div class="uk-sticky-placeholder" style="height: 52px; margin: 0px;">
<div class="toc uk-panel uk-panel-box-primary sticky-toc" style="margin: 0px;">
<ol class="toc-list ">
<li class="toc-list-item">
Testa
<ol class="toc-list is-collapsible">
<li class="toc-list-item">Test 2</li>
</ol>
</li>
</ol>
</div>
</div>
<p class="selectionShareable">Test Content.</p>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
function recreate(){
let newElem = $('.sticky-toc').clone();
$('.sticky-toc').remove();
$('.tm-article-date').after(newElem);
}
recreate();
})
</script>
Is there any code that I could add to the header of every page that would insert HTML at 2 or 3 points on a page (probably in the body), spread out evenly? This would be amazing for the platform that I am currently working on.
For example, maybe you wanted to embed a video using this. Ideally, I could put the code in the header, and it'd insert it 2 or 3 times in the body -- spread evenly.
Here you go: https://jsfiddle.net/westryder907/808xtyq7/
$(document).ready(function() {
$('.body > div').each(function(i, el) {
if (i % 3 === 0) {
$(this).append(" Inserted text via jQuery 2.2");
if (i > 3) {
return false;
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<div class="body">
<div class="region1">
Region1
</div>
<div class="region2">
Region2
</div>
<div class="region3">
Region3
</div>
<div class="region4">
Region4
</div>
<div class="region5">
Region5
</div>
<div class="region6">
Region6
</div>
<div class="region7">
Region7
</div>
<div class="region8">
Region8
</div>
<div class="region9">
Region9
</div>
<div class="region10">
Region10
</div>
</div>
</div>
Why not just edit your code and manually insert content from an external file with PHP?
I think more information is needed to fully understand why you'd want to approach this with your current method. It just doesn't make much sense to me why you would want to do it like this?
I have a plugin in my website and I want to customize a feature that it doesn't provide me.
<div id="4_15:00" class="DOPBSPCalendar-hour dopbsp-available">
<div class="dopbsp-bind-top">
<div class="dopbsp-hour"> </div>
</div>
<div class="dopbsp-bind-middle dopbsp-group0">
<div class="dopbsp-hour">15:00</div>
<div class="dopbsp-available">1 available</div>
</div>
<div class="dopbsp-bind-bottom">
<div class="dopbsp-hour"> </div>
</div>
</div>
<div id="4_16:30" class="DOPBSPCalendar-hour dopbsp-available dopbsp-selected">
<div class="dopbsp-bind-top">
<div class="dopbsp-hour"> </div>
</div>
<div class="dopbsp-bind-middle dopbsp-group0">
<div class="dopbsp-hour">16:30</div>
<div class="dopbsp-available">1 available</div>
</div>
<div class="dopbsp-bind-bottom">
<div class="dopbsp-hour"> </div>
</div>
</div>
This is the part of the table I want to show the selected time under the date:
<table class="dopbsp-cart">
<tbody>
<tr>
<td class="dopbsp-label">Check in</td>
<td class="dopbsp-value">19 February 2015</td>
</tr>
And here is my jQuery:
<script>
jQuery(document).ready(function () {
jQuery('.DOPBSPCalendar-hour.dopbsp-available').click(function (e) {
t = jQuery('.dopbsp-selected .dopbsp-hour').text();
table = jQuery('table.dopbsp-cart .dopbsp-value');
table.first().append("<br>"+t)
});
});
</script>
When a user select a specific time, it automatically adds the class: dopbsp-selected. So, I want to take the selected time and add it below the date. However, I don't have any error on the console and I cannot find the reason that doesn't work.
Your selectors are wrong:
jQuery('.DOPBSPCalendar-hour .dopbsp-available').click(function (e) {
^---
The space means you want nested elements, the first having .DOBetc..., and then a child element with .dobspetc.... Try
jQuery('.DOPBSPCalendar-hour.dopbsp-available').click(function (e) {
^--- no space
which indicates "any one element with these two classes applied".
The selector you are using is wrong.
.DOPBSPCalendar-hour .dopbsp-available
The space show that .dopbsp-available is nested to .DOPBSPCalendar-hour
But what you want is .DOPBSPCalendar-hour.dopbsp-available
which means a element has both the classes
I have a div that contains div in HTML code, i just want to retrieve the string contained in that div, like the word LATTE or price:12 in the next code:
<!DOCTYPE html>
<html>
<head>
…
</head>
<body>
<div id="items">
<div id="heapbox_46958322" class="heapBox">
…
</div>
<select class="basic-example" style="display: none;">
…
</select>
<div id="dummy">
…
</div>
<div id="gallery">
<div class="item_block">
…
</div>
<div class="item_block">
…
</div>
<div class="item_block hasoptions">
price:12
<div class="add_btn">
</div>
<div class="item_name">
LATTE
</div>
</div>
</div>
<div id="order_list">
…
</div>
</div>
<script type="text/javascript">
…
</script>
</body>
Fiddle Here
UPDATE
The answers help me get all the texts in all the divs that called item_Name , but i want it from the div i clicked as i'm using an onlclick event :
$('.item_block').on('click',function(){
// here is the tip
document.getElementsByClassName("add_btn").onclick =
alert($(".item_name").text());
.
.
.
You can use jQuery's .text() function.
Example:
$(".item_name").text();
This will retrieve the text inside all divs with the class item_name.
If you just want the text of the .item_name that you clicked on:
$(".item_name").click(function() {
$(this).text();
});
Demo: http://jsfiddle.net/UFMkQ/1/
Give that div a id
suppose id="getText"
In javascript
var value = document.getElementById('getText').innerText || document.getElementById('getText').textContent;
Try this, this is help to you, In this i just add text to your order_list div for how to add text in div
$('#order_list').html('XYZ');
Fiddle Here
You could use innerHTML attribute of div to get the text inside.
alert(document.getElementById('divid').innerHTML);
innerText on the object should allow you to not only retrieve but also overwrite the text
I have the fiddle all ready to go I just need help with the jquery/javascript part. What I want is to have the record name/station title change when the user clicks on the play button they find on hovering over the album cover. I also want the record/vinyl in the "player" box to start spinning. Right now it spins on hover but I want to change that.
Here is the fiddle http://jsfiddle.net/7txt3/1/
and here is just the html code because the css is kinda long!
<div class="grid_12">
<div class="grid_6 alpha"><!-- record, overflow:hidden -->
<div id="player">
<div id="recordbox">
<div class="record2">
</div>
</div>
<div class="bars-box">
<div class="player-box">
<div id="title-player">Now playing:</div><br><strong><span class="player-station">Groove Salad</span></strong>
<div class="bars">
<div class="bar-1"></div>
<div class="bar-2"></div>
<div class="bar-3"></div>
<div class="bar-4"></div>
<div class="bar-5"></div>
<div class="bar-6"></div>
<div class="bar-7"></div>
<div class="bar-8"></div>
<div class="bar-9"></div>
<div class="bar-10"></div>
</div>
</div>
</div>
</div>
<div class="grid_3">
<div class="album">
<div class="record">
</div>
<div class="recordsinfo"><p class="recordinfo">A nicely chilled plate of ambient/downtempo beats and grooves.</p>
<a class="play" href="#">Play</a>
</div>
<div class="salad"><!-- sleeve -->
<h3>Groove Salad</h3>
</div>
</div>
</div>
<div class="grid_3 omega">
<div class="album">
<div class="record">
</div>
<div class="recordsinfo"><p class="recordinfo">Sensuous and mellow vocals, mostly female, with an electronic influence.</p>
<a class="play" href="#">Play</a>
</div>
<div class="lush"><!-- sleeve -->
<h3>Lush</h3>
</div>
</div>
</div>
Something like this?
$(function(){
var station = $('.player-station');
$('.play').click(function(){
station.text($(this).closest('.album').find('h3').text());
});
});
Demo: http://jsfiddle.net/7txt3/3/
For spinning you can use: http://code.google.com/p/jqueryrotate/
So, first thing is first... you need to read up on the use of an ID versus the use of a Class. To put it a bit simply:
ID = Unique identifier for an element
Class = Identifier for a series of elements
The reason I bring this up is because you have odd naming conventions like class="lush" which don't make sense. That should be an id, and the class should be something like "sleeve".
Anyway, here's the updated code and fiddle. Yes, you can make it a bit more condensed (not set a var for the title), but I wanted to spread it out so you could see the code a little better. If you have questions, let me know.
$('a.play').click(function() {
var title = $(this).closest('.album').find('.album-title');
$('span.player-station').text($(title).text());
});
I also added a class to the h3 tags, just so you didn't run into any issues down the road:
<h3 class="album-title">Lush</h3>
Here's the fiddle:
http://jsfiddle.net/7txt3/4/