Searching jQuery variable full of html

Question

This may be a strange question -- Right now I have a variable that is full of HTML, and I want to use jQuery (or JS) to search that varaible for inputs with checkboxes, and return the information.

So:

alert($(this).parent().parent().html())
var thisIsThat = $(this).parent().parent().html();
alert(thisIsThat)
var Awesome = $(thisIsThat).find('input:checked');

And then after I get that variable, after a successful ajax call, I want to change a specific attribute inside of it, like so:

$(Awesome).attr('value', 'false');

Right now, "Awesome" is returning nothing, which then doesn't allow me to change the attribute like I want to. I may be on the wrong direction as well -- any advice appreciated!

First find out where you are starting.. so console.log($(this)).. then start from there — wirey00, Sep 28 '12 at 12:39
@Shusl How do I target thisIsThat then in jQuery? During the alert it's outputing the correct html? — streetlight, Sep 28 '12 at 12:42
If you do $(thisIsThat).find('input') does it return the number of items you expect? If not maybe your check boxes are not actually checked. Seeing the html in "thisIsThat" would definitely help. — Craig MacGregor, Sep 28 '12 at 12:47
@Nick Why not work with the actual DOM element - `$(this).parent().parent()` - rather than its HTML? — Anthony Grist, Sep 28 '12 at 12:48
Probably you want to give a working example using http://jsfiddle.net/ or something like that... — Sebastian vom Meer, Sep 28 '12 at 12:48
@Nick. Your code should work. I tested it in jsfiddle http://jsfiddle.net/6Tw6Q/1/. are you modifying Awesome any other place. — Anoop, Sep 28 '12 at 12:49
@CraigMacGregor -- sorry, didn't think to include the HTML! Here it is -- 11[email protected][email protected] — streetlight, Sep 28 '12 at 12:51
Thank you all for your help! It seems that taking the .html() out and manipulating it as a DOM element (like jhonraymos and Anthony Grist suggested) worked. Thank you all every much (again). You're awesome! (and thank you Shusl for your early response and making of JS fiddle!) — streetlight, Sep 28 '12 at 13:04

score 3 · Accepted Answer · answered Sep 28 '12 at 12:49

3

Use this

var thisIsThat = $(this).parent().parent();
alert(thisIsThat)
var Awesome = $(thisIsThat).find('input:checked');

In this case thisIsThat is a object and you can find anything using that object

answered Sep 28 '12 at 12:49

StaticVariable

5,253
4
23
45

Thank you for your help! This worked perfectly. I just removed the ':checked' selector as I wanted to hit both checked and unchecked inputs (and there's only one input in this row). – streetlight Sep 28 '12 at 13:02

epascarello · Answer 2 · 2012-09-28T13:28:25.240

This is an example showing the same basic idea running off of a string which finds the checkbox fine and unchecks it.

<div id="out"></div>
<script>
    var htmlStr = '<div><input type="checkbox" checked="checked"/></div>';
    var temp = $(htmlStr);
    var cb = temp.find("input:checked");
    cb.attr("checked",false);
    jQuery("#out").append(cb);
</script>

jsfiddle

The problem I am betting is that you are checking the checkbox manually. It will not update the DOM attribute when you do that.

Here is a basic example to show you the problem.

<div id="one">
    <input type="checkbox" />
</div>
<button>Tell</button>

<script>
    function tellMe(){
        var myDiv = jQuery("#one");
        var html1 = myDiv.html();
        console.log(html1);
    }

    jQuery("button").click(tellMe);  
</script>

Take a look this fiddle of the code above.

Open up the console, and click on the button. You will see it unchecked. Check the checbox and click the button again, same html is outputted even though the checkbox is checked.

Thank you for your help on this! I was running the code inside of a loop, so it was updating regularly I believe, so the other solution worked. Thank you again! — streetlight, Sep 28 '12 at 13:20

Neeraj · Answer 3 · 2012-09-28T13:06:15.217

-3

change

var Awesome = $(thisIsThat).find('input:checked');

to

var Awesome = $(thisIsThat).find('input[type=checked]');

now loop over it

Awesome.each(function(){
  if($(this).is(':checked'))
    {
     $(this).attr('checked',false);
    }
});

edited Sep 28 '12 at 13:06

answered Sep 28 '12 at 12:41

Neeraj

158
5

I'm not too familiar with regular expressions, beside in validation I guess. How do I use regular expressions in this situation? – streetlight Sep 28 '12 at 12:45
1

-1 For recommending using Regex to parse HTML. – newfurniturey Sep 28 '12 at 12:47

Searching jQuery variable full of html

3 Answers3