We Keep Coding

Splitting an html tags

<div id="id1">
"Hi HElP ME
<br>
<p>ok<p>
<div>
<img class = "some class src="">
</div>
<b>ok1<b>
<div>
<img class = "some class src="">
</div>
<p>end<p>
</div>
I want to split this html content such tha output will be:
$("#id1").find('img').each(function(){
var result = somefunction(this)
alert(result)
//After first loop- "Hi HElP ME<br><p>ok<p>
// Second time =<b>ok1<b>
// third time = <p>end<p>
})
Could anyone give me demo for this.As number of images are not shown so please give me a general solution

$('#id1').find('img').each(function(index){
var split_text = $(this).html().split(/<img[^>]*>/)[index];
alert(split_text)
});

Looks like your id selector is referenced incorrectly. It should be $("#1") instead of $("#id1").
Easy mistake to make, but hard to find.

Find an element value with jQuery

In the following HTML markup, how can I get the value of the input field which has the name module_id[], by clicking on the span class .click.
HTML:
<div class="module">
<div class="info">..</div>
<div class="ctrl"><span class="click">Click</span></div>
<input type="hidden" value="module1" name="module_id[]" />
<input type="hidden" value="title" name="module_title[]" />
</div>
I have tried this:
jQuery:
$('.module').on('click','.click',function(){
var target_module = $(this).parent();
var module_id = target_module.find('input[name=module_id\\[\\]]').val();
alert(module_id);
});
Demo:
http://jsfiddle.net/FKdNJ/

$(this).parent(); is giving you the <div class="ctrl"> instead.
You could use $(this).parent().parent(), but a more flexible solution is to use closest() instead;
$(this).closest('.module');
You can see this working here; http://jsfiddle.net/FKdNJ/5/
FWIW, you could also change your approach completely, and use e.delegateTarget to retrieve the .module element directly (http://jsfiddle.net/FKdNJ/7/);
$('.module').on('click','.click',function(e){
var target_module = $(e.delegateTarget);
var module_id = target_module.find('input[name=module_id\\[\\]]').val();
alert(module_id);
});

With:
$('input[name="module_id[]"').val();
jsFiddle example 1
$('.module').on('click', '.click', function () {
console.log($('input[name="module_id[]"').val());
});
If you have more than one set of this block of code, use $(this).closest('.ctrl').next().val():
as in:
$('.module').on('click', '.click', function () {
console.log($(this).closest('.ctrl').next().val());
});
jsFiddle example 2

Try this
$('.module').on('click','.click',function(){
alert($(this).closest('.module').find('[name="module_id[]"]:first').val())
});
http://jsfiddle.net/FKdNJ/3/

Try this. You're probably better off using html 5 data- attributes if possible.
$('span.click').click(function(){
var moduleId = $(this).closest("div.module").find("input[name='module_id[]']").val()
alert(moduleId);
});

I have added a answer in fiddle:
$('.click').on('click',function(){
alert($('input[name=module_id\\[\\]]').val());
})
http://jsfiddle.net/FKdNJ/6/

Get next textarea outside div without id

I need to get the next textarea, but I'm not being able with next or even find.
Sample code HTML:
<div>
<div class="guides_chapters_button" onclick="surroundtest('[center]', '[/center]');">Center</div>
<div class="guides_chapters_button" style="text-decoration: underline;" onclick="surround('[u]', '[/u]');">u</div>
</div>
<textarea class="guides_chapters_textarea" id="textareamatch" name="matchupm" rows="7" cols="25"></textarea>
JS:
window.surround = function surround(text2,text3){
$("#textareamatch").surroundSelectedText(text2, text3);
}
function surroundtest(text2,text3){
var c = $(this).parent().next('textarea');
c.surroundSelectedText(text2, text3);
}
JS FIDDLE: http://jsfiddle.net/qmpY8/1/
What I need working is surroundtest, the other is an example working but using the id. I would love to replace that one because Im usinc cloned objects.

The this statement in surroundtest applies to the window object and not the element. What you should do is to change the function definition as so:
function surroundtest(element, text2,text3){
var c = $(element).parent().next('textarea');
...
}
And the HTML accordingly:
<div class="guides_chapters_button" onclick="surroundtest(this, '[center]', '[/center]');">Center</div>

If this is the HTML you are going with, then .closest() can also be used to get the textarea element.Like below:
var c = $(element).parent().closest('textarea');

Javascript show/hide multiple DIV's

I'm in need of a bit of help. I have a current script that switches div's between being visible and hidden depending on a dropdown selector, it works as it was originally designed absolutely fine.
The problem i have is that i need to modify it to change more than 1 div on the page. Currently i'm using the same ID for the div's but only the first item on the page is updated. Reading over the JS this makes sense, but i can't figure out how to modify it to get the desired result?
Javascript:
var lastDiv = "";
var lastProd = "";
function showDiv(divName, productID) {
if (productID == lastProd) {
$("#"+lastDiv).hide();
$("#"+divName).fadeIn(".visible-div-"+productID);
}
else {
$(".visible-div-"+productID).hide();
$("#"+divName).fadeIn(".visible-div-"+productID);
}
lastProd = productID;
lastDiv = divName;
}
The selector:
<select onchange="showDiv('pxo_'+this.value,2);" name="pre_xo_id">
<option value="3">Blue - £120.00</option>
<option value="4">Red - £120.00</option>
<option value="5">Yellow - £120.00</option>
The DIV's:
<div id="pxo_3" class="visible-div-2" style="display: none;">RED</div>
<div id="pxo_4" class="hidden-div visible-div-2" style="display: none;">BLUE</div>
<div id="pxo_5" class="hidden-div visible-div-2" style="display: block;">YELLOW</div>
<div id="pxo_3" class="visible-div-2" style="display: none;">1 In Stock</div>
<div id="pxo_4" class="hidden-div visible-div-2" style="display: none;">1 In Stock</div>
<div id="pxo_5" class="hidden-div visible-div-2" style="display: none;">0 In Stock</div>

id's must be unique, that's why only the first item is being update. You may put those values to class instead to allow multiple selection.

First you can not use one id for morethan one element.They must be unique.Apply same css class to those elements.
We can use same class instead to allow multiple selection.

IDs are supposed to be used for only a single element on the page. You want to use css selectors.

Thank you for the help all, I have modified the JS to look for both ID and Class as i am unable to change part of the code due to it being protected by ioncube.
This seems to have the desired result:
var lastDiv = "";
var lastProd = "";
function showDiv(divName, productID) {
if (productID == lastProd) {
$("#"+lastDiv).hide();
$("#"+divName).fadeIn(".visible-div-"+productID);
$("."+lastDiv).hide();
$("."+divName).fadeIn(".visible-div-"+productID);
} else {
$(".visible-div-"+productID).hide();
$("#"+divName).fadeIn(".visible-div-"+productID);
$(".visible-div-"+productID).hide();
$("."+divName).fadeIn(".visible-div-"+productID);
}
lastProd = productID;
lastDiv = divName;
}

How Do I Replace/Change The Heading Text Inside <h3></h3>, Using jquery?

How do I change/replace the <h3> text: "Featured Offers" using javascript to say "Public Offers" instead?
</div> <!-- FEATURED OFFERS -->
<div class="panel">
<div class="head">
<h3>Featured Offers</h3>
</div>
<div class="body">
<table>
<thead>
<tr>

If you can select it, you can manipulate it.
Try this:
$(".head h3").html("your new header");
But as others mentioned, you probably want head div to have an id.

you don't - not like this.
give an id to your tag , lets say it looks like this now :
<h3 id="myHeader"></h3>
then set the value like that :
myHeader.innerText = "public offers";

$("h3").text("context")
Just use method "text()".
The .text() method cannot be used on form inputs or scripts. To set or
get the text value of input or textarea elements, use the .val()
method. To get the value of a script element, use the .html() method.
http://api.jquery.com/text/

Give an id to h3 like this:
<h3 id="headertag">Featured Offers</h3>
and in the javascript function do this :
document.getElementById("headertag").innerHTML = "Public Offers";

try this,
$(".head h3").html("New header");
or
$(".head h3").text("New header");
remember class selectors returns all the matching elements.

Something like:
$(".head h3").html("Public offers");

jQuery(document).ready(function(){
jQuery(".head h3").html('Public Offers');
});

You can try:
var headingDiv = document.getElementById("head");
headingDiv.innerHTML = "<H3>Public Offers</H3>";

Hope that help someone:-
Element with a class attribute with the value of "className":
<h3 class="className"></h3>
You will make a refernce of by the class name:
const newTitle = document.querySelector(".className");
Then change the content:
newTitle.textContent = "New Title";