标签: jquery-selectors

我是jQuery的新手,当我从HTML中选择一些类时,我可以通过$('.p')或者来做$('p').我很困惑,有区别吗？

我的页面上有几个元素具有相同的数据属性,尽管值不同.元素的格式如下:

<input type="radio" data-toggle='["one","two","three"]'/>

现在,我想从所有这些元素中获取数据,我想我可以做到:

var data = $('[data-toggle]').data("toggle");

但是这只输出第一个元素的数据,忽略了具有该数据属性的所有其他元素.

我猜这与它的阵列/ JSON格式有关,但我不清楚为什么会这样,我应该如何去检索我的所有值.

如何从所有这些数据属性中获取所有数据？

这是一个说明我的问题的小提琴:http://jsfiddle.net/6u67o9oo/

我想使用伪选择器和此属性.我该怎么用呢

$('input:valid').length

如果有效的其他0为无效,它将返回1.

同样如果我想用它来实现,我怎么能这样做.这样的事情.

$('input').focusout(function(){
var flag=$('this:valid').length;
console.log(flag);
})

但它不起作用.请指导我如何做到这一点.

我根本不熟悉JQuery,但我想知道是否可以在动作上更改具有相同id的所有元素.

$(document).ready(function() {
    document.getElementById("id_scheduled_time").disabled = true;
    document.getElementById("id_scheduled_day").disabled = true;
});

$('#id_schedule_type').on('change', function() {
    if ($("#id_schedule_type").prop('selectedIndex') == 0) {
        document.getElementById("id_scheduled_time").disabled = true;
        document.getElementById("id_scheduled_day").disabled = true;

    }
    else {
      document.getElementById("id_scheduled_time").disabled = false;
      document.getElementById("id_scheduled_day").disabled = false;
    };
});


$('#id_scheduled_period').on('change', function() {
    if ($("#id_scheduled_period").prop('selectedIndex') == 2) {
        $('#id_scheduled_minute').attr("placeholder","Insert number 1-15").val("");
    } else {
        $('#id_scheduled_minute').attr("placeholder","Insert number 1-45").val("");
    };
});

是的,这段代码看起来很糟糕,但它现在有效.对我来说问题是有多个选项卡和输入字段的选项卡都具有相同的ID(例如id_scheduled_time)

现在它在单个选项卡中工作得很好,但对其他id没有任何作用.这里的问题是:如何以相同的方式为选择索引更改所有元素

我有一个查询,当鼠标在图像上时,对列表项的文本进行更改,我在查询中放置了一个事件目标:

    $('img').on('mouseover', function(){
     // I would like an Id of a text instead of the 'li'
      $('li').css('text-decoration', 'underline');
    });

    $('img').on('mouseout', function(){
      $('li').css('text-decoration', 'none');
    });

但我希望将其更改为仅应用于与图像具有相同ID的项目:

s[i++] = '<li id=\"'+  vizList[j].name +'\">';
s[i++] =  '<a>'+ vizList[j].name + '</a>';
s[i++] =  '<img id=\"'+  vizList[j].name +'\" src="../renderer/bundles/' + vizList[j].icon + '" width="268" height="120" style="display:block"/>';
s[i++] = '</li>';

So I know that we can have multiple event handlers on the .on() method

$(document).on({
    'click': function (e) {
       // function
    },
    'hover': function (e) {
       // function    
    }
});

but is there anyway we can add multiple selectors to each event handler?

like this:

$(document).on('click', '#foo, .foo', function () { 
     // function
});

but with multiple .on() methods:

$(document).on({
    'click', '#foo': function (e) {
       // doesn't work :(
    },
    'hover', '.foo': function (e) {
       // doesn't work :(    
    } …

我的页面中有多个嵌套的ul.嵌套的ul通过以下jquery代码显示.

jQuery的

$("li").click(function(){
    $(this).children("ul").show("slow");
});

但是我想一次只显示一个嵌套的ul.我的意思是当我点击一个li时,它应该只显示其子ul并隐藏其他孩子ul.我在之前的jquery代码中添加了以下行

$("li ul").not(this).hide("slow");

但它不起作用.

CSS

li ul{
    display:none;
}

HTML

<li>
    <a href="#">Insert + </a>
    <ul>
        <li>
            <a href="services.php">Services</a>
        </li>
        <li>
            <a href="notice.php">Notice and Information</a>
        </li>
    </ul>
</li>

<li>
    <a href="#">View + </a>
    <ul>
        <li>
            <a href="services.php">Comments</a>
        </li>
        <li>
            <a href="notice.php">Status</a>
        </li>
    </ul>
</li>

我可以使用$(this)和css选择器吗？

例如,如果我想执行以下操作:

$(".toggle-nav").on("click", function(){
    $(".nav").toggleClass("active");
    $(this).toggleClass("active");
});

有没有什么方法可以缩短到以下或类似的东西？

$(".toggle-nav").on("click", function(){
    $(this|".nav").toggleClass("active");
});

我知道我可以这样或类似的东西:

$(".toggle-nav").on("click", function(e){
    element = e.currentTarget;
    // get selector from e.currentTarget ...
    $("#"+element.id+",.nav").toggleClass("active");
});

但是有一种jQuery方法吗？

我试图用puppeteer废弃一些数据,但对于一些网站querySelector返回null,我不知道有什么问题.我在stackoverflow中找到了关于这个问题的一些答案,但没有一个有效.这是带有示例链接的代码不起作用.

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    await page.goto('https://www.macys.com/shop/product/the-north-face-mens- 
    logo-half-dome-t-shirt?ID=2085687&CategoryID=30423&cm_kws=2085687');

    const textContent = await page.evaluate(() => {
    return document.querySelector('.price');
});

console.log(textContent); 

browser.close();
})();

我有CMS，这使得以这样的方式，我不能添加任何额外的标记id，class或events到元素。

这样，我必须以编程方式添加它们。任务很简单：

1）。通过类名称查找元素并添加到其后继者（img）id名称

2）。onClick给它添加属性

3）。执行脚本onClick（应交换图像和href名称（最多3张图像））

JSFiddle

这是一个标记：

<div class="single-image text-center to_change_inner">
   <div class="content">
      <div class="single-image-container">
      <img class="img-responsive" src="https://picsum.photos/200/300">
      </div>
   </div>
</div>

<div>
    <a id="btn-1559300726188">Click</a>
</div>

这是一个JQuery：

jQuery(function($) {
    element1 = $('.to_change_inner').children('img'); //find() also doesn't work
    element1.id="imgClickAndChange";
    if (element1.addEventListener) { 
      element1.addEventListener("click", changeImage, false);
    } else {
      if (element1.attachEvent) {  
        element1.attachEvent("click", changeImage);
      }
    }
 });    

 function changeImage() {

    if (document.getElementById("imgClickAndChange").src == "https://picsum.photos/200/300") 
    {
        document.getElementById("imgClickAndChange").src = …