Question

我正在尝试编写一个脚本，如果父结构是div.main-element input + label + ul，则只获取抓取。

有没有合适的方法来设置使用javascript或jquery？

如果有人可以将我引导到适当的答案或文档，这绝对是非常棒的。

我的最终目标是使用附加或.replace（）替换带有hr标记的ul＆gt; li

这是我的 HTML ：

.example-enter {  
  background-color: #FFDCFF;
  color: white;
}

.example-enter.example-enter-active {
  background-color: #9E1E9E;  
  transition: background-color 0.5s ease;
}

.example-leave {
  background-color: #FFDCFF;
  color: white;
}

.example-leave.example-leave-active {
  background-color: #9E1E9E;  
  transition: background-color 0.3s ease;
}

.add-todo {
  margin-bottom: 10px;
}

Answer 1

您可以使用jquery中的这种代码检查您想要的元素是否存在：

if($("div.main-element ul li").length){
//your code
}

这将在您的html示例上执行，接下来您可以使用以下命令修改第一个元素的值：

$("div.main-element ul li").append("blahblahblah");

请注意，这使您可以访问在html页面的div.main-element＆gt; ul内找到的第一个li标记。

Answer 2

您可以为jquery调用提供第二个参数，该调用是您要从中获取元素的父容器。还有find函数可以执行相同的操作。

HTML：

<div class='main-element'>
    <input>
    <label></label>
    <ul>
        <li>Example</li>
    </ul>
</div>
<div class='secondary-element'>
    <input>
    <label></label>
</div>

JS：

var $secondaryElement = $('.secondary-element');
var $secondaryInput = $('input', $secondaryElement);

另一种方法：

var $secondaryInput = $('.secondary-element').find('input');

上面的两个例子都只返回secondary-element div。

中的输入元素

这会回答你的问题吗？

链接：

https://api.jquery.com/find/

和

https://api.jquery.com/jquery/#selector-context

Answer 3

这将获得包含你的作品的所有元素，并用hr替换ul＆gt; li。

var elements = document.querySelectorAll(".main-element input+label+ul li");

for(var i = 0; i < elements.length; i++){
    var parent = elements[i].parentNode.parentNode;
    var ul = elements[i].parentNode;
    ul.parentNode.removeChild(ul);
    var hr = document.createElement("hr");
    parent.appendChild(hr);
}

如何根据JS中的特定父结构选择元素？

3 个答案: