Show divs create dynamically which are inside others divs create dynamically

Question

I create some divs with this snippet

for (let index = 0; index < data.length; index ++)
{
    if (lastFriendInsert !=  data[index]['friend']['name'])
    {
        $('.data').append(
            '<div class="friend friend'+index+'">' +
                '<span class=\'dataKey\'>Name: </span><span class=\'dataValue\'>' + data[index]['friend']['name'] + '</span><br>'
            '</div>'
        );

        if ( data[index]['whoIsTagged'] != null && data[index]['taggedTogetherCount'] != null)
            $('.friend'+index).append(
                '<div class=" btn istaggedWithbtn istaggedWithbtn'+index+'">Show who is tagged with</div>' +
                '<div class="istaggedWith istaggedWith'+index+'"></div>'
            );

        lastIndexInsert = index;
        taggedWith(data,lastIndexInsert,index);
    }

    lastFriendInsert = data[index]['friend']['name'];

}

So I have the following structure:

 data
   |_friend0
   |     |_istaggedWithbtn istaggedWithbtn0
   |     |_ istaggedWith istaggedWith0
   |
   |_friend1
         |_istaggedWithbtn _istaggedWithbtn1
         |_istaggedWith istaggedWith1

The divs istaggedWith are hidden with the property display:none;

I want to click on the istaggedWithbnt1 and show just the related div istaggedWith; in this case istaggedWith1. How can I do this?

I write just the following code to enable the click event on the button, but I can't show the related div

     $('.data').on('click', '.istaggedWithbtn',function(){
                ...
     });

Variations on this question are very common on SO. It is hard to find them bcs everyone's use case is different, and the specifics vary wildly. [The standard solution is the same though](https://stackoverflow.com/questions/14460421/get-the-contents-of-a-table-row-with-a-button-click) - start with the element that was clicked and use that to identify the element you want. In your case, inside your event handler, something like: `$(this).closest('[class^=friend]').find('.istaggedWith').show()` should do it. — Don't Panic, Mar 02 '20 at 21:05
Does this answer your question? [Get the contents of a table row with a button click](https://stackoverflow.com/questions/14460421/get-the-contents-of-a-table-row-with-a-button-click) — Don't Panic, Mar 02 '20 at 21:05

score 0 · Answer 1 · answered Mar 02 '20 at 17:28

This line

$('.friend'+index).append

do the concat before the line

var class= '.friend' + index;
$(class).append

Also a good way to test is to make the append stuff into a var.

var content = '<div class=" btn istaggedWithbtn istaggedWithbtn'+index+'">Show who is tagged with</div><div class="istaggedWith istaggedWith'+index+'"></div>'

if ( data[index]['whoIsTagged'] != null && data[index]['taggedTogetherCount'] != null)
$(class).append(content);

You can then do an alert to check the divs are being shown correctly, using a div and then + with another Div can create problems.

One more thing, are these two values?

data[index]['friend']['name']

If so set them as vars

var friend = data[index]['friend'];
var name = data[index]['name'];

but i think it should be

var friend = data[index].friend;
var name = data[index].name;

The for your IF statement do it like this

lastFriendInsert !=  friend

if it is two values your IF needs to be like this

lastFriendInsert !=  friend || lastFriendInsert !=  name

By using variables you can use console.log or alert to check the value is correct, hope this helps you to fix the issues.

It's true that I could have done the assignments that you say, but they wouldn't have solved my problem. They would only have avoided too long instructions. I'd already tested the whole thing, and the structure that came out of it was the one I wanted — Lx2pwn, Mar 02 '20 at 19:15

score 0 · Answer 2 · answered Mar 02 '20 at 17:34

You also missed the {} on your if

if ( data[index]['whoIsTagged'] != null && data[index]['taggedTogetherCount'] != null)
            $('.friend'+index).append(
                '<div class=" btn istaggedWithbtn istaggedWithbtn'+index+'">Show who is tagged with</div>' +
                '<div class="istaggedWith istaggedWith'+index+'"></div>'
            );

should be

 if ( data[index]['whoIsTagged'] != null && data[index]['taggedTogetherCount'] != null)
{
            $('.friend'+index).append(
                '<div class=" btn istaggedWithbtn istaggedWithbtn'+index+'">Show who is tagged with</div>' +
                '<div class="istaggedWith istaggedWith'+index+'"></div>'
            );
}

The parentheses { } are actually superfluous because the `if` contains just one instruction; in this case the append() — Lx2pwn, Mar 02 '20 at 19:12

Show divs create dynamically which are inside others divs create dynamically

2 Answers2