I've been digging documents and the forum to find a way to mix both selectors, but I didn't. I only know how to select all elements that [attribute*=value]
(ex: $("[attribute*='value']")
), or all HTML elements from the same type (Ex: $("input[name*='value']")
. How do I select something like $("$(this)[name*='value']")
.
EDIT:
In this case, I'm using the selector.class. But just for the propose of example. I need to select both "more-bed" buttons. But all buttons of class "more" are firing the alert.
$(".more").click(function() { if ($(".more").filter('[name*=bed]')) { alert("bed") } });
button { width: 100px; height: 30px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="more" name="bed-test">more-bed</button> <button class="more" name="bed-check">more-bed</button> <button class="less" name="bed-test">less-bed</button>
You can use not()
$('[name=bed-test]').not('.less').on('click', () => console.log('yay'))
button { width: 100px; height: 30px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="more" name="bed-test">more-bed</button> <button class="less" name="bed-test">less-bed</button> <button class="more" name="bath-test">more-bath</button>
You can also use filter()
$('.more').on('click', e => $(e.currentTarget).filter('[name=bed-test]').css('width', '300px'))
button { width: 100px; height: 30px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="more" name="bed-test">more-bed</button> <button class="less" name="bed-test">less-bed</button> <button class="more" name="bath-test">more-bath</button>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.