(jQuery) Multiple split auto href not work - javascript

I will add in the automatic ID selector A, but could not for more than one selector.
I created the code like this:
<div class="comment_name"><a id="testing" href="http://test.wordpress.com">Djohan</a></div>
<div class="comment_name"><a id="testing" href="http://test.blogspot.com">Yogi</a></div>
<script>
var ksDOM=document.getElementById('testing').href;
var sprit=ksDOM.split(".")[1]
$(".comment_name a").attr("href",sprit);
</script>
Please help me. Below is an example of the full code:
http://www.kangsigit.com/p/editor.html?filename=not_work

IDs should be unique. You can rather use same class name and then class selector to target them. Also you can use callback function of .attr() to set new attribute value:
$(".comment_name a").attr('href',function(e){
return $(this).attr('href').split(".")[1];
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="comment_name"><a id="testing_1" href="http://test.wordpress.com">Djohan</a></div>
<div class="comment_name"><a id="testing_2" href="http://test.blogspot.com">Yogi</a></div>

Related

Get value from div to textbox

Is there a way to get the value from a div element to textbox?
My script codes
$(document).ready(function() {
barcode.setHandler(function(barcode) {
$('#result').html(barcode);
});
barcode.init();
I show the result with the following code
<div id="result"></div>
I fail to get the div value into the textBox.
<input type="text" id="result">
To achieve expected result, use below option
Avoid using same id for multiple elements , instead of that use class or two different ids or use one as class and for other use as id
$(document).ready(function() {
console.log( $('#result').text())
$('.result').val( $('#result').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result">1222</div>
<input type="text" class="result">
code sample - https://codepen.io/nagasai/pen/yjomXp
Ids need to be unique on a given page; your input and div both have the same id. To insert from the div to the input, first get the text inside the div, then apply that to the input using .val().
const foo = $('#foo').text();
$('#bar').val(foo);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
This is inside the div
</div>
<input type="text" id="bar"></input>

jQuery append element using parent attribute

I'm trying to user jQuery to, for each element using the class button-0, add a new child element with the class button-0-text, and the text equal to the data-text attribute of the original button-0 element. I tried this...
HTML:
<div class="flex fs-0 button-0" data-text="Enhance"></div>
Javascript:
$(".button-0").append($("<div></div>").addClass("button-0-text").text($(this).parent().attr("data-text")));
...but it's not working. Is this even the proper way to do it? Any help would be really appreciated. Thank you ^.^
Try this way:
$('.button-0').each(function() {
$(this).append('<div class="button-0-text">' +$(this).data('text')+ '</div>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex fs-0 button-0" data-text="Enhance1"></div>
<div class="flex fs-0 button-0" data-text="Enhance2"></div>
This should do it:
var buttons = $('.button-0');
buttons.each(function(i, elem){
var child = $('<div/>', {'class': 'button-0-text'});
child.text($(this).data('text'));
child.appendTo(this);
});

How to select an element which is made after page-loading using jquery?

Here is my code:
$("body").on('click', '#btn', function(e) {
$('div').after('<span>it is a test</span>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div></div>
<button id="btn">click</button>
Now I want to set a CSS property (for e.g color: red;) to that <span> using .css(). How should I select it?
Suppose, Your span has ID named spnText
then, you can add css in the following way
$("span#spnText").css("attributeName", "attributeValue");
Check this: https://jsfiddle.net/c8vLm9w8/
If your page is simple you can select your span just by using tagName selector and jquery next() function, e.g :
$("div").next('span').css("color", "red");
If you will add other elements better if you can use id or class to identify your tags, e.g using class :
$('div').after('<span class="span1">it is a test</span>'); //Definition
$("div").next('.span1').css("color", "red"); //Selection
Snippet :
$("body").on('click', '#btn', function(e) {
$('div').after('<span>it is a test</span>');
$("div").next('span').css("color", "red");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Div</div><br>
<button id="btn">click</button>
Hope this helps.

Javascript remove specific css value

I am trying to remove the word "Quantity" from below and I think I am close but obviously something is off since it's not working.
<div class="DetailRow" style="display: ;">
<div class="Label">
<label>Quantity</label>
With:
<script type="text/javascript">
$(document).ready(function(){
$('#text_qty_').parent().parent().remove();
$('#qty_').parent().parent().remove();
$('.QuantityInput').remove();
$('label[for="Quantity"]').css('display', 'none').remove();
});
</script>
Try doing it with pure js after adding an id.
<div class="DetailRow" style="display: ;">
<div class="Label">
<label id ="text">Quantity</label>
<script type="text/javascript">
$(document).ready(function(){
document.getElementById("text").innerHTML = "";
});
</script>
Your label needs an id. In this example, I'll use "quantity" as the id.
$('label[id="quantity"]').hide();
This will work but this will apply the style to all labels.
$('label')
Using Pure JavaScript is best though.
Try this $('label').html('');.
$('label[for="Quantity"]') will not retrieve <label>Quantity</label> since it doesn't have the attribute for. Just use $('label') or $('.Label label') and it will work.
Try this if you want to remove the label element itself:
var labels = $('label');
if( labels.text() == 'Quantity' ){
labels.remove();
}
To just remove the word Quantity without removing the label element:
labels.text('');
If you want to remove its parent:
labels.parent().remove();
Also to remove the parent's parent, the <div class="DetailRow"> use this:
labels.parent().parent().remove();
JSFiddle
You can use plain javascript and existing markup with querySelector:
var el = document.querySelector('.DetailRow .Label label');
if (el) {
// do stuff
}
If you want to remove the content, then:
el.textContent = '';
If you want to remove the element, then:
el.parentNode.removeChild(el);
and so on…
I think you can check the label value, and remove the label if the value equals to "Quantity"
Try this:
<div class="DetailRow">
<div class="Label">
<label>Quantity</label>
</div>
</div>
And the script:
$(document).ready(function(){
$(".DetailRow label:contains('Quantity')").hide();
});
http://codepen.io/Himechi90/pen/rOJYjX
Thank you Griffith! This worked perfectly. Full code for anyone trying to remove the quantity and quantity box from only some of your products on bigcommerce. Note that you need to create a separate product template and add this below %%Panel.Header%%
<script type="text/javascript">
$(document).ready(function(){
$('#text_qty_').parent().parent().remove();
$('#qty_').parent().parent().remove();
$('.QuantityInput').remove();
$('label').filter(function() { return $(this).text() === "Quantity"; }).remove();
});
</script>
Note also that your values for #text_qty_ etc may change depending on your template.
Thank you all for taking the time to help me!

How to append text after last css class

I have the following html
<div class="someClass">
Some text
</div>
<div class="someClass">
Some other text
</div>
<div class="add>
<img src="someImage.jpg">
</div>
Now I'd like to append another div after a click on the add image - but only after the last div with the class "someClass".
If I use the following jQuery it will be appended after each someClass element, so multiple times.
$(".add img").live("click", function() {
$(".containerFooter").after("<div class='someClass'>test</div>");
});
Is there a way to only append it after the last div with the someClass attribute?
You are looking for the :last selector:
$(".someClass:last").after("<div class='someClass'>test</div>");
$('.someClass').last()
OR
$('.someClass:last')
will give you last element of class someclass
Use:
$(".someClass").last().append("<div class='someClass'>test</div>");
$(".add img").live("click", function() {
$(".someClass:last").after("<div class='someClass'>test</div>");
});
Sorry, dint read the question completely in first attempt, updated the ans!
Also your html has a typo , its make it
working demo
$(".someClass").last() //-> selects your last div with id = someClass
.after("<div class='someClass'>test</div>");//-> place the html after the selected div
Actual code below
$(".add").live("click", function(){
$(".someClass").last().after("<div class='someClass'>test</div>");
});
​
​
There may be an easier way, but a jquery class returns an array of applicable objects. So you can find the last such object, create a new jquery object from it, and then operate on that.
<html><title>JQuery Play</title>
<h1>JQuery Play</h1>
<script src="jquery-1.4.1.js" type="text/javascript" ></script>
<script type="text/javascript">
function add()
{
var x=$(".someClass");
$(x[x.length-1]).after("Added text");
}
</script>
<div class="someClass">
Some text
</div>
<div class="someClass">
Some other text
</div>
<div class="add">
<button onclick="add()">Add</button>
</div>
</html>

Categories

Resources