when link is clicked, find if parent with certain child exists jquery

Question

What I'm looking for, is a way to determine whether or not the parent of the clicked link, with a class of row-fluid contains an id matching a predetermined child.

what I have tried so far is Here. (jsFiddle)

Can anyone please explain why my code does not work? And also, my coding is pretty terrible, so any advice on shorthand code is fine. I tend to over-think things often

<div class="row-fluid">
    <div id="success-1">Entry One</div>
    <div class="span3"> <a href="#" id="1" class="delete-me">delete</a>

    </div>
</div>
<div class="row-fluid">
    <div id="accord-2">Entry Two</div>
    <div class="span3"> <a href="#" id="2" class="delete-me">delete</a>

    </div>
</div>
<div class="row-fluid">
    <div id="success-3">Entry Three</div>
    <div class="span3"> <a href="#" id="3" class="delete-me">delete</a>

    </div>
</div>

JS:

$('.delete-me').on('click', function () {
    var id = $(this).attr("id");
    if ($(this).parent(".row-fluid").has("#accord-*")) {
        var name = $("#accord-" + id).html();
        alert(name);
    }else{
        var name = $("#success-" + id).html();
        alert(name);
    }
});

Answer 1

The following will work - only the condition in the if has been changed:

$('.delete-me').on('click', function () {
    var id = $(this).attr("id");
    if ($(this).closest(".row-fluid").has("[id^='accord-']").length > 0) {
        var name = $("#accord-" + id).html();
        alert(name);
    }else{
        var name = $("#success-" + id).html();
        alert(name);
    }
});

Demo: http://jsfiddle.net/RZPW2/15/

The main problem with your if condition:

if($(this).parent(".row-fluid").has("#accord-*")) {

...is that it is always truthy, because the .has() method returns a jQuery object not a boolean, and any object is truthy.

Also, the .parent() method only gets the immediate parent element, which in the anchor's case is not the .row-fluid element - use .closest() instead to go up to the closest ancestor with that class.

Finally, to select by an id that starts with a particular string use the attribute starts with selector .

If each group is always going to contain either the accord-* or success-* element you could instead give both of those a common class:

<div id="success-1" class="entryName">Entry One</div>

...because then you wouldn't need the if test at all:

$('.delete-me').on('click', function () {
    var name = $(this).closest(".row-fluid").find(".entryName").html();
    alert(name);
});

Demo: http://jsfiddle.net/RZPW2/18/

Answer 2

Couple of issues with your code:

1. $(this).parent(".row-fluid") won't work because the row is not the immediate parent of your link, you should use closest(".row-fluid") to traverse up and find the first parent that matches the selector

2. You can't use wildcards in your selectors like in has("#accord-*") , you need to use the attribute starts with selector: "[id^='accord-']" , also has() returns a jQuery object, not a boolean

3. Not a real issue but you should use data attributes to comply with HTML5 standards <a href="#" data-id="3" class="delete-me">delete</a>

And if you want to simplify things a bit, you could write

$('.delete-me').on('click', function () {
    var id = $(this).data('id');
    alert($(this).closest('.row-fluid').find('#success-'+id+',#accord-'+id).text());
});

Updated fiddle

Answer 3

Now, I'm not 100% on this, but I think it has to do with accessing the proper parent from which to traverse the DOM and grab the proper DIV . If that will always be the structure of your DIV 's, then you can go about it like so:

$(".delete-me").on("click", function () {
    var obj = $(this), id = obj.attr("id"), parent = obj.parent().parent(), name = parent.find("div[id$='-" + id + "']").html();
    alert(name);
});

Which uses the ends with selector ( id$= ), or since that is the only DIV with an ID in the tree, you could use has attribute like so:

$(".delete-me").on("click", function () {
    var obj = $(this), parent = obj.parent().parent(), name = parent.find("div[id]").html();
    alert(name);
});