How to get child element of another child of the same parent with jQuery/JS

Question

I have an input box that generates a bunch of divs using jQuery. Inside each div, there are more divs including an a link. When the user clicks that a element, I want an alert box to show the html of another div inside of the same main div. See code below.

HTML

---

<form rol="form">
    <div class="form-group">
        <label for="s" id="s-label">Please enter the id below</label>
        <input class="form-control text-center" type="input" id="s" onkeyup="getS( $( this ).val() );">
    </div>
</form>

<div class="col-md-12" id="s-results">
</div>

jQuery (This is an AJAX call)

---

function getS(sS) { 
  $.ajax({
    type: 'POST',
    url: 's-query.php',
    mimeType: 'json',
    //dataType: 'application/json',
    data: {sku: sS},
    success: function(data) {
        var disp = "";

        counterp = 0;
        $.each(data, function(i, data) {
            disp += "<div class='col-md-12' id='sDisplay'>";
            disp += "<div class='col-md-2' id='dSku' >" + data[0] + "</div>";
            disp += "<div class='col-md-3' id='dDesc'>" + data[1] + "</div>";
            disp += "<div class='col-md-2' id='dMast'>" + data[2] + "</div>";
            disp += "<div class='col-md-2 text-center'>";
            disp += "<input class='col-md-6 text-center' type='number' value='"+ data[3] + "' id='dChange'>";
            disp += "</div>";
            disp += "<div class='col-md-2 text-center'>" + data[4] + "</div>";
            disp += "<div class='col-md-1 text-center'><a class='inv-click' id='" + counterp + "' onclick='updateD(this.id)'  value='" + counterp + "'><i class='fa fa-check-square-o'></i></a></div>";
            disp += "</div>";

            counterp = counterp + 1;
        });

        //Success function if all goes well.
        $( "#sku-results" ).empty();

        $( "#s-results" ).append( disp );

    },
    error: function() {
        alert('There seems to be an error fetching the data.');
    }
  });
}

function updateD(getId)
{
    var par = $( "#" + getId ).closest("skuDisplay").children("dMast").html();
    alert(par);
}

The result of the jQuery populates the s-results div to come out to be something along the lines of this...

12345 | Item 1 | 2,680 | 195 | 123-456 | update (<-this is the a element)
98765 | Item 2 | 2,680 | 45  | 987-653 | update
74185 | Item 3 | 2,680 | 330 | 645-852 | update
...

...where each row is a parent div (skuDisplay), and each "column" or value in the row is it's own div inside of the parent div.

In this example, every time someone clicks on the a element in each div, I want an alert box to show the corresponding div inside the same div as the a element with the id dMast. In the example above, using .html(), when I click on the a element, the alert box just displays undefined, even though the html inside of the dMast div is 2,680.

I've tried to replace html(), or something in that line, with the following, with no luck:

-var par = $( "#" + getId ).closest("skuDisplay").children("dMast").val();

-var par = $( "#" + getId ).parent("skuDisplay").children("dMast").text();

-var par = $( "#" + getId ).parent().children("dMast").html();

How would I obtain the html of divs inside of the same parent as the a element that was clicked?

Answer 1

your missing the #id for skudisplay and dmast

Answer 2

$( "#skuDisplay #dMast" ).html in other words first put the parent then put the child the parent can be written as a .class or #id