Pick up Div inner element next to

Question

Pick up Div inner element next to

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I'm trying to make clicking on a button the content of div on the side editable. Home Better viewing the code:

<div id="nome" class="container">
    <div class="col-10">
        <p class="editar" contenteditable="false">Digite o nome</p>
    </div>
    <div class="col-2">
        <button>Editar</button>
    </div>
    <div id="Sobrenome" class="container">
        <div class="col-10">
            <p class="editar" contenteditable="false">Digite o Sobrenome</p>
        </div>
        <div class="col-2">
            <button>Editar</button>
        </div>
    </div>
</div>

Currently jQuery is like this, but clicking the button selects both the content.

$("button").click(function() {      
    if ($("div > .editar").attr("contenteditable") == "false") { 
        $("div > .editar").attr("contenteditable", "true");
        $("div > .editar").focus().text(""); 
        $("div > .editar").addClass("selecionado"); 
        $(this).text("Concluído"); 
    } else { 
        $("div > .editar").attr("contenteditable", "false"); 
        $("div > .editar").blur(); 
        $("div > .editar").removeClass("selecionado"); 
        $(this).text("Editar"); 

        if ($("div > .editar").is(":empty")) { 
            $("div > .editar").text("Digite o nome"); 
        }; 
    };
});

I'm not finding a way to use the .closest that I think would be a possible save for assigning the clicked button to the div element next to it, since both have the same parent (the #name or #surname).

javascript html jquery dom

asked by anonymous 28.07.2017 / 16:09

2 answers

0

The problem you are experiencing is more HTML semantics than the click function with JQuery . You can do this:

<div id="nome" class="container">
<div class="col-10">
    <label>Nome</label>
    <input type="text" class="inputs" value="Fulano" disabled/>
</div>
<div id="Sobrenome" class="container">
<div class="col-10">
    <label>Sobrenome</label>
    <input type="text" class="inputs" value="da Silva" disabled/>
</div>
<div class="col-2">
    <button id="editar">Editar</button>
</div>

$("#editar").on('click', function(event){
   event.preventDefault();
   $('.inputs').prop("disabled", false);
});

Follow example functional

28.07.2017 / 16:25

Premature end of script headers ValueError type error in Learn Python the Hard Way

score 0 · Accepted Answer

Thanks to all who have helped me, and to those who are having the same difficulty, this is the solution I found.

$(this).siblings()

Used to get the element's div div and then entering the paragraph.

Thank you.