CODEWITHSUNDEEP
javascriptjqueryhtml
Vishnu
Vishnu

Reputation: 2452

Closest parent not working

Below is my html 

<div test="dive" data-role="collapsible">
        <h3 test="h3">morning Snack <i></i></h3>
    <p>seI'm the collapsible content for section 2</p>

   <form>
       <input test="sd" class="checkclass"  name="checkbox-mini-0" id="checkbox-mini-0" data-mini="true" type="checkbox"></input>
    <label for="checkbox-mini-0">Completed This.</label>
   </form>

    </div>

below is javascript

$(".checkclass").click(function() {
    var tes = $(this).closest("div").attr("test");
    alert(tes);
});

I am trying to access div.h3.i ... but i cant access div itself :/ .please check this fiddle http://jsfiddle.net/9cQmJ/ . where i am wrong ?

Upvotes: 2

Views: 116

Answers (6)

reergymerej
reergymerej

Reputation: 2417

Another div has been created to wrap the checkbox that you can't see, and that's the one your code is referencing.

$(this).closest('div').find('input').attr('test');

You can see this by adding a debugger and testing out what jQuery selector you need to get what you want like this.

$('.checkclass').click(function () {
  var tes = $(this).closest('div').attr('test');
  debugger;
  // At this point, if your console is open you can inspect tes
  // and see it's not what you want.  Type in $(this).closest('div') 
  // and you'll see it's referencing a div that was created automatically.

  // Try different selectors to find what you need.
});

Upvotes: 1

Salman Arshad
Salman Arshad

Reputation: 272406

It looks like the framework wraps the checkbox inside a div element and you end up looking at the wrong div. One workaround is to locate the closest div that contains a h3 element; and grab the attribute:

$(this).closest("div:has(h3)").find("h3").attr("test");

Upvotes: 1

dhana
dhana

Reputation: 6525

Try this,

var tes = $(this).closest("div[data-role='collapsible']").attr('test');

Demo

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388446

you need to find the div element with the test attribute (if you want the test attribute of the div element)

var tes = $(this).closest("div[test]").attr("test");

Demo: Fiddle

test attribute of the h3 element

var tes = $(this).closest("div[test]").find('h3').attr("test");

Demo: Fiddle

The problem is jQuery Mobile is adding other html structure required for the styling of the elements, which adds other div elements to the structure.

Upvotes: 1

Matteo Tassinari
Matteo Tassinari

Reputation: 18584

The problem here is that the checkbox gets wrapped by a div, you can see that in the javascript console.

See this fiddle: http://jsfiddle.net/9cQmJ/5/

$(".checkclass").click(function () {
    var test = $(this).closest("div").attr("test");
    console.log($(this).closest('div')); // div surrounding checkbox
    console.log($(this).closest('div[test]').attr('test')); // now it gets to the div you want
});

Upvotes: 1

Anton
Anton

Reputation: 32591

That's because the html after DOM is loaded looks like this

<div class="ui-collapsible-content" aria-hidden="false">
    <p>seI'm the collapsible content for section 2</p>
    <form>
        <div class="ui-checkbox">
            <input test="sd" class="checkclass" name="checkbox-mini-0" id="checkbox-mini-0"
            data-mini="true" type="checkbox">
            <label for="checkbox-mini-0" data-corners="true" data-shadow="false" data-iconshadow="true"
            data-wrapperels="span" data-icon="checkbox-off" data-theme="c" data-mini="true"
            class="ui-btn ui-btn-corner-all ui-mini ui-btn-icon-left ui-checkbox-on ui-btn-hover-c ui-btn-up-c"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Completed This.</span>
                <span
                class="ui-icon ui-icon-shadow ui-icon-checkbox-on">&nbsp;</span>
                    </span>
            </label>
        </div>
    </form>
</div>

So you must use another kind of selector, try using attribute selector

var tes = $(this).closest("div[test]").attr("test");

DEMO

Upvotes: 5

Related Questions