Природа ближайшего ('') селектора

Я провожу некоторый эксперимент с JQuery, и это происходит,

Есть флажок, и если пользователь щелкнет по нему, то тег <p> будет добавлен в ближайший div, а также, если пользователь отключит его, тег <p> будет удален.

Когда я делаю $(obj).closest("div").append, абзац будет добавлен в следующий ближайший div, но когда я убираю его, он удаляет весь div. Я не хочу больше рассматривать удаление дочернего div, когда я делаю $(obj).closest("div").append, я не добавляю тот же div, а следующий div, когда я удаляю его, также удаляю весь div флажка. кто-нибудь может объяснить?

$("#checkObxId").click(function() {
var result = onCheckChange(this);
addDynamicRow(this, result);
});

function onCheckChange(obj) {
$(obj).val(false);
var result = false;
if ($(obj).prop("checked") == true) {
    $(obj).val(true);
    result = true;
}
return result;
}

function addDynamicRow(obj, result) {
if (result) {
    $(obj).closest("div").append("<p>This is input</p>");
} else {
    $(obj).closest("div").empty();
  } 
}

HTML:

<form id = "smsForm">
<div class = "checkbox">
    <label> <input type = "checkbox" name = "smsToOrganization"
        id = "smsToOrganization"> SMS TO Organization
    </label>
</div>
<div></div>
<div class = "checkbox">
    <label> <input type = "checkbox" name = "smsToClient"
        id = "smsToClient">Sms To Clien
    </label>
</div>
<div></div>
<div class = "checkbox">
    <label> <input type = "checkbox" name = "smsToBod" id = "smsToBod">
        Sms To BOD
    </label>
</div>
<div></div>
<div class = "checkbox">
    <label> <input type = "checkbox" name = "smsToAnyone"
        id = "smsToAnyone"> SMS To Anyone
    </label>
   </div>
  <div></div>
</form>

jquery

02.05.2018 06:59

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Ответы 2

Вам нужен $.parents() вместо $.closest().

See more for complete docs

спасибо, @Arvind, мне интересно, почему он добавляет контент в следующий ближайший div и почему он также удаляет предыдущий div, я не очень знаком с js, что-то мне не хватает?

— 02.05.2018 07:11

02.05.2018 07:07

$(function() {
    $("input:checkbox").click(function() {
        if (this.checked) {
            $(this).closest("div").append("<p id='test'>This is input</p>"); //append id = "test" nearest code...
        } else {
            $('#test').remove(); //remove id = "test" closest code...
        }
    });
});

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "checkbox">
    <label> <input type = "checkbox" name = "smsToOrganization"
        id = "smsToOrganization"> SMS TO Organization
    </label>
</div>
<div></div>
<div class = "checkbox">
    <label> <input type = "checkbox" name = "smsToClient"
        id = "smsToClient">Sms To Clien
    </label>
</div>
<div></div>
<div class = "checkbox">
    <label> <input type = "checkbox" name = "smsToBod" id = "smsToBod">
        Sms To BOD
    </label>
</div>
<div></div>
<div class = "checkbox">
    <label> <input type = "checkbox" name = "smsToAnyone"
        id = "smsToAnyone"> SMS To Anyone
    </label>
   </div>
  <div></div>